/* =========================================================
   Calvin Chen Studio · design tokens
   ---------------------------------------------------------
   EVERY colour, font, size, spacing, radius and motion value
   on the site comes from this file. Change a value here and
   the whole site follows. Never hard-code a hex value in any
   other CSS file.

   To try a new palette: edit only the "1. Palette" block.
   The "2. Roles" block maps palette colours to jobs, so the
   rest of the code never needs to know the actual colours.
   ========================================================= */

/* Self-hosted font (no Google request, so no visitor data leaves the site) */
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/hanken-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/hanken-grotesk-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* ---------- 1. Palette (raw colours) ---------- */
  --c-paper:    #FFFFFF;  /* page background */
  --c-mist:     #EEF4F3;  /* cool pale surface, panels */
  --c-mist-2:   #E2ECEA;  /* slightly deeper surface, hover */
  --c-line:     #DCE5E4;  /* hairlines and borders */
  --c-ink:      #12232B;  /* main text, deep petrol */
  --c-slate:    #5B6E74;  /* secondary text */
  --c-fog:      #8A9A9F;  /* decorative only: too light for text (2.9:1) */
  --c-jade:     #1E7A6E;  /* primary accent, taken from the hero footage greens */
  --c-jade-2:   #2A9A8B;  /* lighter jade for small marks */
  --c-harbour:  #2F6F9F;  /* secondary accent: links, focus ring */
  --c-wall:     #1B2A1F;  /* the dark green studio wall in the hero film */

  /* ---------- 2. Roles (what each colour is used for) ---------- */
  --bg:            var(--c-paper);
  --surface:       var(--c-mist);
  --surface-hover: var(--c-mist-2);
  --border:        var(--c-line);
  --text:          var(--c-ink);
  --text-muted:    var(--c-slate);
  --text-faint:    var(--c-slate);   /* text never uses fog: contrast rule 4.5:1 */
  --accent:        var(--c-jade);
  --accent-soft:   color-mix(in srgb, var(--c-jade) 12%, var(--c-paper));
  --accent-mark:   var(--c-jade-2);
  --link:          var(--c-harbour);
  --focus:         var(--c-harbour);
  --media-bg:      var(--c-wall);

  /* Buttons */
  --btn-solid-bg:     var(--c-ink);
  --btn-solid-fg:     var(--c-paper);
  --btn-solid-hover:  var(--c-jade);
  --btn-line-fg:      var(--c-ink);
  --btn-line-border:  var(--c-line);
  --btn-line-hover:   var(--c-ink);

  /* Glass chips on top of video */
  --glass-bg:     color-mix(in srgb, var(--c-paper) 78%, transparent);
  --glass-border: color-mix(in srgb, var(--c-paper) 60%, transparent);
  --glass-text:   var(--c-ink);
  --leader:       color-mix(in srgb, var(--c-paper) 85%, transparent);

  /* ---------- 3. Type ---------- */
  --font-sans: "Hanken Grotesk", "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;

  /* Scale: a 1.25 ratio, clamped so phones never get oversized text */
  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-22: clamp(1.25rem, 1.1rem + 0.5vw, 1.375rem);
  --fs-28: clamp(1.5rem, 1.25rem + 1vw, 1.75rem);
  --fs-40: clamp(1.875rem, 1.4rem + 2vw, 2.5rem);
  --fs-56: clamp(2.25rem, 1.5rem + 3.2vw, 3.5rem);
  --fs-80: clamp(2.75rem, 1.6rem + 5vw, 5rem);

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  --lh-tight: 1.05;
  --lh-snug: 1.25;
  --lh-body: 1.6;
  --lh-zh: 1.8;          /* Chinese needs more air than Latin */
  --track-display: -0.025em;
  --measure: 34rem;      /* about 70 characters per line */

  /* ---------- 4. Space (4px base) ---------- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;
  --section-y: clamp(4.5rem, 3rem + 6vw, 8rem);
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  --container: 75rem;    /* 1200px */
  --container-narrow: 52rem;

  /* ---------- 5. Shape (radius follows hierarchy, not one value for all) ---------- */
  --r-sm: 6px;     /* buttons, small controls */
  --r-md: 12px;    /* images, panels */
  --r-lg: 22px;    /* the hero film frame */
  --r-pill: 999px; /* chips */

  /* ---------- 6. Depth (used once: chips over video) ---------- */
  --shadow-chip: 0 1px 2px color-mix(in srgb, var(--c-ink) 10%, transparent),
                 0 8px 24px color-mix(in srgb, var(--c-ink) 12%, transparent);

  /* ---------- 7. Motion ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 160ms;
  --t-base: 280ms;
  --t-slow: 900ms;

  /* ---------- 8. Layers ---------- */
  --z-header: 50;
}