/* CV Heap · design tokens
Front page, phase one. Snapra Studio.

One source of truth for every size, space and colour on the page.
Nothing in the stylesheet uses a raw number or a raw hex.

The colour half is mirrored one to one by the Figma collection
"1 · Case file": same names with the group dropped, same values, both
modes. The sizes and spaces are not: the "0 · Scale" collection in
that file is older than this and its type ramp no longer matches. The
values here are the ones that ship. */

:root {
  /* ---- families ------------------------------------------------ */
  /* Loaded from Google Fonts in index.html. The fallbacks matter:
     if that request fails the page still has to read like a typed
     document, not like a default browser page. */
  --font-display: "Archivo Black", "Arial Black", "Helvetica Neue", sans-serif;
  --font-strong:  "Archivo", "Arial", sans-serif;   /* the CV name, the buttons */
  --font-body:    "Libre Franklin", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "Courier Prime", "Courier New", ui-monospace, monospace;

  /* ---- type, measured off the Figma file -----------------------
  Named by role rather than by step, because the page is a
  document. Written size / line-height / tracking.             */
  --t-hero:        4.375rem;   --lh-hero: 0.94;   --ls-hero: -0.037em;
  --t-heading:     2.375rem;   --lh-heading: 1.0; --ls-heading: -0.033em;
  --t-subheading:  1.8125rem;   --lh-sub: 1.06;    --ls-sub: -0.03em;
  --t-wordmark:    1.3125rem;                      --ls-wordmark: -0.03em;
  --t-stamp:     1.2312rem;                      --ls-stamp: 0.02em;
  --t-lede-lg:     1.1875rem;   --lh-lede-lg: 1.7;
  --t-lede:      1.0312rem;   --lh-lede: 1.55;
  --t-lead:        1rem;   --lh-lead: 1.6;
  --t-body:        0.9375rem;   --lh-body: 1.62;   --lh-body-loose: 1.7;
  --t-ui:          0.9375rem;
  --t-small:       0.875rem;   --lh-small: 1.5;
  --t-cv:          0.8125rem;   --lh-cv: 1.58;
  --t-mono-md:   0.7812rem;   --lh-mono-md: 1.6;
  --t-mono:        0.75rem;   --lh-mono: 1.5;
  --t-mono-sm:     0.6875rem;                      --ls-eyebrow: 0.08em;
  --t-mono-xs:   0.6562rem;                      --ls-filed: 0.12em;
  --t-mono-2xs:    0.625rem;                      --ls-meta: 0.10em;
  --t-mono-3xs:     0.5625rem;                      --ls-note: 0.14em;
  --ls-tab:      0.05em;
  --ls-rule:     0.13em;
  --ls-disclaimer: 0.06em;

  /* ---- the page, measured off the Figma file ------------------- */
  --page:          86rem;  /* the board, edge to edge             */
  --page-pad:        2.75rem;  /* board margin around the folder      */
  --folder-pad:      0.875rem;  /* the lip of the folder around a sheet*/
  --sheet-pad-y:     2.875rem;
  --sheet-pad-x:     3.25rem;
  /* One left margin for the whole file. Every sheet clears the
     punched holes by the same amount, so a straight line could be
     drawn down the page through the start of every heading. */
  --sheet-pad-left:  4.875rem;
  --margin-x:        3.5rem;  /* the red rule on the notebook page   */
  --gap-specimen:    2.75rem;
  --gap-charter:     1.625rem;
  --gap-head:        1rem;
  --gap-actions:     1.5rem;

  /* ---- spacing scale, base 4 ----------------------------------- */
  --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:  7.5rem;   /* 120 */

  /* ---- radii --------------------------------------------------- */
  /* The rounded top of a folder tab. The folder and the back cover
     echo it on their own outside corners, so the whole file is cut
     with one radius. In rem, so it grows with the page. */
  --radius-tab:  0.375rem;

  --radius-sm:   0.25rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.875rem;
  --radius-pill: 62.4375rem;

  /* These four add up to what the folder keeps at the top of the
  window. --board-top is the strip of board above the tabs and
  travels with them; --tabs-h and --head-h are the tab row and the
  case line, each shaved a hair so the one below tucks under the
  one above. Anything that scrolls to a heading has to clear it. */
  --board-top:  0.75rem;
  --tabs-h:     2.4rem;
  --head-h:     1.9rem;
  --folder-hold: calc(var(--board-top) + var(--tabs-h) + var(--head-h));



  /* ---- motion -------------------------------------------------- */
  --ease:     cubic-bezier(0.2, 0, 0, 1);
  --duration: 160ms;
  --duration-drawer: 260ms;
}


/* ================================================================
Colour · direction B, the paper case file.

Measured, not guessed. Ratios are the worst case across the
surfaces the token is allowed on. 4.5:1 for text, 3:1 otherwise.

--board and --tab-rest carry NO body text. Only --ink and --ink-2
may sit on them: --ink-3 on the board drops to 3.2:1.
================================================================ */

:root {
  /* ---- surfaces, darkest to lightest --------------------------- */
  --board:     #BEBCAF;  /* the desk the folder lies on. decorative */
  --tab-rest:  #D6CBAB;  /* a folder tab that is not the open one   */
  --folder:    #E6DDC3;  /* the manila folder itself                */
  --sheet:     #FAF8F2;  /* a sheet of paper                        */

  /* Tabs under the cursor. The open one cannot take the same tint:
     it is cut from the same card as the folder and shares its
     colour so the seam between them disappears, so its hover is a
     small lift towards the paper instead of a change of surface. */
  --tab-hover:      #DFD5B8;  /* a closed tab   · ink 2  7.43 : 1    */
  --tab-open-hover: #EFE7D0;  /* the open tab   · ink   14.94 : 1    */
  --button-hover:   #262318;  /* the ink button · invert 14.80 : 1   */
  --sheet-2:   #FFFFFF;  /* the whiter stock the CV is printed on   */

  /* ---- marked paper -------------------------------------------- */
  --note:      #F3E28A;  /* the sticky note        · ink 14.11 : 1  */
  --marker:    #F2D64B;  /* the yellow marker      · ink 12.73 : 1  */
  --wash-red:  rgb(185 50 37 / 0.16);   /* highlight over a line    */
  --wash-green:rgb(30 83 64 / 0.15);    /* the same, kept not cut   */
  --note-label:#73631A;  /* the label on the note  · note  4.55 : 1 */

  /* ---- ink ------------------------------------------------------ */
  --ink:       #15140E;  /* headings, body       · 9.67 : 1 anywhere */
  --ink-2:     #403D31;  /* running text         · 5.70 : 1 anywhere */
  --ink-3:     #666251;  /* small caps, captions · 4.52 : 1 on paper
                            and folder only. never on the board.     */
  --ink-invert:#FAF8F2;  /* on the ink button    · 17.37 : 1         */

  /* The CV is printed stock, not the file's paper, so it carries its
     own ink. These four are the lightest greys that still clear
     4.5:1 on --sheet-2. They are not interchangeable with --ink-3:
     move one onto --sheet and the margin disappears. */
  --cv-text:   #221F19;  /* the name and the lines · 16.43 : 1       */
  --cv-role:   #79766B;  /* the job title           ·  4.55 : 1      */
  --cv-fine:   #7A7765;  /* the disclaimer          ·  4.51 : 1      */
  --cv-keyword:#797668;  /* the words the filter kept ·  4.56 : 1    */

  /* ---- pen and stamp -------------------------------------------- */
  --red:       #B62F22;  /* the pen              · 4.53 : 1 on paper */
  --green:     #1E5340;  /* the must interview mark · 5.49 : 1       */
  --link:      #26478F;  /* links                · 5.46 : 1          */
  --brass:     #6C6140;  /* filing marks on the folder · 4.53 : 1    */
  --green-ink: #2C3A33;  /* the kept lines, over --wash-green 9.33:1 */
  --clip:      #8E8A76;  /* the paperclip. an object, not a mark,
                            so it answers to 3:1, not 4.5:1          */
  --verdict:   rgb(255 255 255 / 0.5);  /* under a stamp, so the
                            stamp reads over whatever it lands on    */

  /* ---- ruling and edges ----------------------------------------- */
  --line:       #D3DAD2;   /* between rows on a sheet               */
  --line-loud:  #C8BC9B;   /* the folded edge of the folder         */
  --rule-left:  rgb(38 71 143 / 0.16);  /* notebook ruling, margin  */
  --rule-right: rgb(38 71 143 / 0.10);  /* lighter under the text   */
  --margin-red: rgb(185 50 37 / 0.30);  /* the vertical margin line */
  --hole:       #CFC4A4;   /* the punched holes                     */

  /* Depth. A shadow is the absence of light, so on a dark desk there
     is none left to take away and the cast stops working. --edge-lit
     is the other half of it: the top edge of a raised thing catching
     the lamp. It is transparent here because paper on a bright desk
     does not need it, and it is declared on everything that is
     lifted so the dark theme has one place to turn it on. */
  --shadow:     21 20 14;                /* the ink a shadow is made of */
  --edge-lit:   transparent;             /* the lit top edge of a card  */
  --tab-lit:    rgb(255 255 255 / 0.4);  /* the top of a folder tab     */

  /* Brass at four strengths. A printed form rules heavily under a
     heading and lightly between rows, and the difference is the
     whole reason the record reads as a form. Ratios on --sheet. */
  --ticket:       rgb(21 20 14 / 0.55);   /* the dashed ticket   */
  --brass-strong: rgb(108 97 64 / 0.55);  /* under a head · 2.32 */
  --brass-mid:    rgb(108 97 64 / 0.35);  /* the leader   · 1.66 */
  --brass-soft:   rgb(108 97 64 / 0.30);  /* over a list  · 1.53 */
  --brass-faint:  rgb(108 97 64 / 0.22);  /* between rows · 1.36 */

  color-scheme: light;
}

/* ================================================================
   The same file under a lamp.

   Every value is measured against the surface it actually lands on,
   the same way the light palette is, and the layout does not change
   by a pixel: this is the same page with the light turned down.

   Three states, and the order matters. Left alone, the page follows
   whatever the reader already told their system. --theme="dark" and
   --theme="light" are the reader overriding that here, which is what
   the switch in the case line writes down.

   The palette below appears twice because CSS has no way to give one
   block two selectors when one of them lives in a media query. The
   two copies are identical and have to stay that way.
   ================================================================ */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  color-scheme: dark;

  /* ---- surfaces, darkest to lightest --------------------------- */
  --board:     #15130D;  /* the desk under a lamp                   */
  --tab-rest:  #241F14;
  --folder:    #2E2817;
  --sheet:     #38331F;
  --tab-hover:      #2C2618;
  --tab-open-hover: #363020;
  --button-hover:   #E2DAC6;  /* invert 13.33 : 1                   */
  --sheet-2:   #3D3622;  /* one step over --sheet, the same step the
                            light theme takes from paper to stock   */

  /* ---- marked paper -------------------------------------------- */
  --note:      #5B4C16;
  --marker:    #6E5712;
  --wash-red:  rgb(242 147 131 / 0.14);  /* tints by 1.28, as in light */
  --wash-green:rgb(119 198 162 / 0.13);
  --note-label:#D7BE4D;  /* on the note            · note  4.56 : 1 */

  /* ---- ink ------------------------------------------------------ */
  --ink:       #F2ECDB;  /* 10.17 : 1 on --sheet-2                   */
  --ink-2:     #DED6C0;  /*  7.35 : 1                                */
  --ink-3:     #BDB6A3;  /*  4.63 : 1 under the red wash, the worst
                            surface it is allowed on                 */
  --ink-invert:#15130D;
  --cv-text:   #F5F0DF;  /*  9.88 : 1 on the printed stock           */
  --cv-role:   #A7A59C;  /*  4.86 : 1                                */
  --cv-fine:   #A8A596;  /*  4.85 : 1                                */
  --cv-keyword:#A8A69A;  /*  4.91 : 1                                */

  /* ---- pen and stamp -------------------------------------------- */
  --red:       #F29383;
  --green:     #77C6A2;
  --link:      #9DB8F2;
  --brass:     #C0AE77;
  --green-ink: #DCEFE4;  /*  7.81 : 1 over the green wash            */
  --clip:      #8A8270;  /*  3.85 : 1 on the folder                  */
  --verdict:   rgb(21 19 13 / 0.45);  /* darkens under the stamp
                            here, where in light it lightens        */

  /* ---- ruling and edges ----------------------------------------- */
  --line:       #4A4330;
  --line-loud:  #5C5238;
  --rule-left:  rgb(157 184 242 / 0.18);
  --rule-right: rgb(157 184 242 / 0.11);
  --margin-red: rgb(242 147 131 / 0.35);
  --hole:       #1E1A10;

  /* Depth turns over. There is no light left to take away from the
     desk, so the cast does almost nothing and the lit top edge does
     the work instead. This is what --edge-lit was declared for. */
  --shadow:     0 0 0;
  --edge-lit:   rgb(255 252 240 / 0.07);
  --tab-lit:    rgb(255 252 240 / 0.06);

  --ticket:       rgb(242 236 219 / 0.45);
  --brass-strong: rgb(192 174 119 / 0.45);
  --brass-mid:    rgb(192 174 119 / 0.27);
  --brass-soft:   rgb(192 174 119 / 0.23);
  --brass-faint:  rgb(192 174 119 / 0.16);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  /* ---- surfaces, darkest to lightest --------------------------- */
  --board:     #15130D;  /* the desk under a lamp                   */
  --tab-rest:  #241F14;
  --folder:    #2E2817;
  --sheet:     #38331F;
  --tab-hover:      #2C2618;
  --tab-open-hover: #363020;
  --button-hover:   #E2DAC6;  /* invert 13.33 : 1                   */
  --sheet-2:   #3D3622;  /* one step over --sheet, the same step the
                            light theme takes from paper to stock   */

  /* ---- marked paper -------------------------------------------- */
  --note:      #5B4C16;
  --marker:    #6E5712;
  --wash-red:  rgb(242 147 131 / 0.14);  /* tints by 1.28, as in light */
  --wash-green:rgb(119 198 162 / 0.13);
  --note-label:#D7BE4D;  /* on the note            · note  4.56 : 1 */

  /* ---- ink ------------------------------------------------------ */
  --ink:       #F2ECDB;  /* 10.17 : 1 on --sheet-2                   */
  --ink-2:     #DED6C0;  /*  7.35 : 1                                */
  --ink-3:     #BDB6A3;  /*  4.63 : 1 under the red wash, the worst
                            surface it is allowed on                 */
  --ink-invert:#15130D;
  --cv-text:   #F5F0DF;  /*  9.88 : 1 on the printed stock           */
  --cv-role:   #A7A59C;  /*  4.86 : 1                                */
  --cv-fine:   #A8A596;  /*  4.85 : 1                                */
  --cv-keyword:#A8A69A;  /*  4.91 : 1                                */

  /* ---- pen and stamp -------------------------------------------- */
  --red:       #F29383;
  --green:     #77C6A2;
  --link:      #9DB8F2;
  --brass:     #C0AE77;
  --green-ink: #DCEFE4;  /*  7.81 : 1 over the green wash            */
  --clip:      #8A8270;  /*  3.85 : 1 on the folder                  */
  --verdict:   rgb(21 19 13 / 0.45);  /* darkens under the stamp
                            here, where in light it lightens        */

  /* ---- ruling and edges ----------------------------------------- */
  --line:       #4A4330;
  --line-loud:  #5C5238;
  --rule-left:  rgb(157 184 242 / 0.18);
  --rule-right: rgb(157 184 242 / 0.11);
  --margin-red: rgb(242 147 131 / 0.35);
  --hole:       #1E1A10;

  /* Depth turns over. There is no light left to take away from the
     desk, so the cast does almost nothing and the lit top edge does
     the work instead. This is what --edge-lit was declared for. */
  --shadow:     0 0 0;
  --edge-lit:   rgb(255 252 240 / 0.07);
  --tab-lit:    rgb(255 252 240 / 0.06);

  --ticket:       rgb(242 236 219 / 0.45);
  --brass-strong: rgb(192 174 119 / 0.45);
  --brass-mid:    rgb(192 174 119 / 0.27);
  --brass-soft:   rgb(192 174 119 / 0.23);
  --brass-faint:  rgb(192 174 119 / 0.16);
}

/* ================================================================
   States. Defined once, here, and nowhere else.
   ================================================================ */

:root {
  --focus:        var(--red);
  --focus-width:  2px;
  --focus-offset: 3px;   /* keeps the ring off the ink button       */
}

/* Focus. Keyboard only, so a mouse click does not light it up.
   The red ring clears 3:1 on every surface, board included: 3.22
   on the board, 4.53 on the folder, 8.09 on a sheet. */
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: var(--focus-width) solid var(--focus);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-sm);
}

/* Links read as ink first and as a link second, which is what a
   typed document does. Hover thickens the rule under the word.
   Active turns it into pen. */
.link {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-thickness var(--duration) var(--ease),
              color var(--duration) var(--ease);
}
.link:hover { text-decoration-thickness: 2px; }
.link:active { color: var(--red); }

/* The primary button is a block of ink. Hover lifts it a little,
   active presses it down, like a stamp. */
.button {
  background: var(--ink);
  color: var(--ink-invert);
  border: 0;
  box-shadow: 0 1px 0 rgb(var(--shadow) / 0.25);
  transition: transform var(--duration) var(--ease),
              box-shadow var(--duration) var(--ease),
              background var(--duration) var(--ease);
}
.button:hover  { background: var(--button-hover); box-shadow: 0 2px 0 rgb(var(--shadow) / 0.30); }
.button:active { transform: translateY(1px); box-shadow: 0 0 0 rgb(var(--shadow) / 0); }

/* Folder tabs. The open one is the same colour as the folder, so it
   reads as one piece of card rather than as a selected button. */
.tab              { background: var(--tab-rest); color: var(--ink-2); }
.tab:hover        { background: var(--tab-hover); }
.tab[aria-current]{ background: var(--folder); color: var(--ink); }

/* Selecting text on this page should look like running a marker
   over it. */
::selection { background: var(--marker); color: var(--ink); }

/* ================================================================
   Preferences the page has to respect.
   ================================================================ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* More contrast: drop the quiet greys and firm up the rules. */
@media (prefers-contrast: more) {
  :root {
    --ink-3: var(--ink-2);
    --line:  var(--line-loud);
    --rule-left:  rgb(38 71 143 / 0.30);
    --rule-right: rgb(38 71 143 / 0.20);
  }
}

/* Windows high contrast throws our colours away, so the marks that
   carry meaning have to survive on their own. The struck lines are
   real <del> elements and the kept ones real <mark>, so this only
   needs to restore a visible edge. */
@media (forced-colors: active) {
  .button, .tab { border: 1px solid; }
  :where(a, button, summary, [tabindex]):focus-visible { outline: 2px solid; }

  /* Here the colour that carries the meaning is thrown away, so each
     mark has to stand up on its own. The struck lines of the first
     CV get their line back, the kept lines of the second get a rule
     under them, and the keywords a dotted one. */
  main .cv del  { text-decoration: line-through; }
  main .cv mark { text-decoration: underline; text-underline-offset: 0.2em; }
  main .cv__keyword { text-decoration: underline dotted; text-underline-offset: 0.2em; }

  /* The scorecard is read by its dots, and a background is not a
     thing that survives here. Both are drawn with a border instead,
     which does survive: one thick enough to fill the circle for yes,
     a thin ring for no. */
  .dot { background: none; border: 0.28125rem solid currentColor; }
  .dot--off { border-width: 1.5px; opacity: 1; }
}