/* ==========================================================================
   Tryworks tokens
   Every visual value on the site lives in this file. Templates and site.css
   only read these properties; nothing else sets a colour, a face or a size.

   Three layers, each overriding the one above it:
     1. House  :root            fixed values: palette, faces, type scale, space
     2. Door   [data-door=...]  owns a face and a ground/text pair
     3. Line   [data-line=...]  takes only a colour and a cut. Never a family.

   Values marked PLACEHOLDER are stand-ins; README lists them all.
   ========================================================================== */

/* Webfonts. Swapping a face means editing this import and the --face-* lines. */
@import url("https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;1,400;1,500&family=Barlow+Condensed:wght@700&display=swap");


/* 1. HOUSE ---------------------------------------------------------------- */

:root {
  /* Palette: fixed */
  --ink:   #1C1A17;
  --cream: #F4EFE6;
  --rule:  #CFC7BA;
  --muted: #5E574D;

  /* Palette: door grounds */
  --night:       #1E2A36;
  --night-muted: #B9B2A6; /* PLACEHOLDER: Stay secondary text, 6.9:1 on night */
  --night-rule:  #44505C; /* PLACEHOLDER: Stay hairlines */

  /* Palette: line accents */
  --brick: #9A3E28;
  --line-poetry-accent: #35584F; /* sea green; 6.9:1 with cream either way */

  /* Faces */
  --face-house: "EB Garamond", Garamond, "Times New Roman", serif;
  --face-stay:  "Barlow Condensed", "Arial Narrow", sans-serif; /* PLACEHOLDER: stand-in */

  /* Type scale: size / line-height. Desktop values are the spec;
     phone values below 48rem are PLACEHOLDERS so Display fits 358px. */
  --display-size: 2.75rem;   --display-lh: 1.0;   /* 44 phone, 72 desktop */
  --title-size:   2rem;      --title-lh:   1.1;   /* 32 phone, 44 desktop */
  --heading-size: 1.5rem;    --heading-lh: 1.2;   /* 24 phone, 28 desktop */
  --lede-size:    1.25rem;   --lede-lh:    1.4;   /* 20 phone, 22 desktop */
  --body-size:    1.125rem;  --body-lh:    1.55;  /* 18 */
  --italic-size:  1.125rem;  --italic-lh:  1.55;  /* 18 */
  --small-size:   0.9375rem; --small-lh:   1.45;  /* 15 */
  --label-size:   0.8125rem; --label-lh:   1.3;   /* 13; line-height PLACEHOLDER */
  --label-tracking: 0.14em;
  --data-size:    0.9375rem; --data-lh:    1.45;  /* 15; line-height PLACEHOLDER */
  --data-numerals: tabular-nums lining-nums;

  /* Wordmark: TRYWORKS in capitals, letterspaced 14% */
  --wordmark-size:     1.125rem; /* PLACEHOLDER */
  --wordmark-tracking: 0.14em;
  --wordmark-house-weight: 400; /* TRYWORKS is always EB Garamond Regular, on any door */

  /* Mark (aspect 360 x 247) */
  --mark-ink:      url("/assets/img/tryworks-mark.svg");
  --mark-reversed: url("/assets/img/tryworks-mark-reversed.svg");
  --mark-height:   1.75rem;  /* PLACEHOLDER */
  --mark-ratio:    360 / 247;

  /* Space: 4 to 128 */
  --space-1: 0.25rem;  /*   4 */
  --space-2: 0.5rem;   /*   8 */
  --space-3: 0.75rem;  /*  12 */
  --space-4: 1rem;     /*  16 */
  --space-5: 1.5rem;   /*  24 */
  --space-6: 2rem;     /*  32 */
  --space-7: 3rem;     /*  48 */
  --space-8: 4rem;     /*  64 */
  --space-9: 6rem;     /*  96 */
  --space-10: 8rem;    /* 128 */

  /* Layout. Phone: 16px gutter. Desktop grid: 1280, 12 cols, 80 margin, 24 gutter. */
  --gutter:     1rem;
  --grid-gap:   1rem;
  --page-max:   80rem;
  --measure:    38rem;   /* running text held to about 7 of 12 columns */
  --cover-max:  22rem;   /* PLACEHOLDER: cover width on the book page */
  --cover-ratio: 2 / 3;  /* 6 x 9 trim */
  --section-gap: var(--space-8);

  /* Lines and edges */
  --hairline:    1px;
  --radius:      0;      /* PLACEHOLDER: square corners throughout */
  --focus-width: 2px;
  --focus-offset: 3px;
}

@media (min-width: 48rem) {
  :root {
    --display-size: 4.5rem;   /* 72 */
    --title-size:   2.75rem;  /* 44 */
    --heading-size: 1.75rem;  /* 28 */
    --lede-size:    1.375rem; /* 22 */
    --gutter:       2.5rem;   /* PLACEHOLDER: tablet margin */
    --grid-gap:     1.5rem;   /* 24 */
    --mark-height:  2.25rem;  /* PLACEHOLDER */
    --section-gap:  var(--space-9);
  }
}

@media (min-width: 80rem) {
  :root {
    --gutter: 5rem; /* 80 */
  }
}


/* 2. DOOR ----------------------------------------------------------------- */
/* A door owns a face and the ground/text pair. Set on <body data-door="..."> */

[data-door="tryworks"] {
  --ground:       var(--cream);
  --text:         var(--ink);
  --text-muted:   var(--muted);
  --rule-colour:  var(--rule);
  --field-border: var(--muted);  /* 3:1 minimum for form edges; --rule is too faint */
  --focus-colour: var(--ink);
  --door-face:        var(--face-house);
  --door-face-weight: 400;
  --door-mark:        var(--mark-ink);
  --house-mark:       var(--mark-ink);      /* the Tryworks mark as signature, e.g. in a footer */
  --wordmark-face:    var(--face-house);
}

[data-door="stay"] {
  --ground:       var(--night);
  --text:         var(--cream);
  --text-muted:   var(--night-muted);
  --rule-colour:  var(--night-rule);
  --field-border: var(--night-muted);
  --focus-colour: var(--cream);
  --door-face:        var(--face-stay);
  --door-face-weight: 700;
  --door-mark:        none;         /* Stay's sibling mark is still to come */
  --house-mark:       var(--mark-reversed);
  --wordmark-face:    var(--face-stay);
}


/* 3. LINE ----------------------------------------------------------------- */
/* A line takes only a colour and a cut. It never sets a font family.
   Set on any wrapper: a book page, a book entry, a line band. */

[data-line] {
  --accent:     var(--text);
  --on-accent:  var(--ground);
  --cut-weight: var(--door-face-weight);
  --cut-style:  normal;
}

[data-line="memoir"] {
  --accent:     var(--brick);
  --on-accent:  var(--cream);
  --cut-weight: 500;
  --cut-style:  normal;
}

[data-line="poetry"] {
  --accent:     var(--line-poetry-accent);
  --on-accent:  var(--cream);
  --cut-weight: 400;
  --cut-style:  italic;
}