/* =====================================================================
 * DO NOT EDIT
 *
 * Design tokens for KH Portfolio.
 * Source of truth: Figma file DzsLCogHGGEym6WYjlOpvD, node 2:2.
 *
 * Every layout, type, color, and spacing value used on the site is
 * defined here. Do not add or change a token without reading the
 * corresponding value from Figma first.
 *
 * Motion belongs in motion.css. Do not add motion tokens to this file.
 * ===================================================================== */


/* -------------------- @font-face -------------------- */

@font-face {
  font-family: "Scandia";
  src: url("../fonts/Scandia-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Scandia";
  src: url("../fonts/Scandia-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Scandia";
  src: url("../fonts/Scandia-RegularItalic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Scandia";
  src: url("../fonts/Scandia-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Scandia";
  src: url("../fonts/Scandia-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Scandia Line";
  src: url("../fonts/ScandiaLine-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Potassium Scandal";
  src: url("../fonts/scandal.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Deluge";
  src: url("../fonts/Deluge.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


:root {

  /* -------------------- Font stacks -------------------- */

  --font-display: "Potassium Scandal", "Impact", "Georgia", serif;
  --font-body:    "Scandia", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-line:    "Scandia Line", "Scandia", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-rotator: "Deluge", "Brush Script MT", cursive;


  /* -------------------- Colors: page surfaces -------------------- */

  --surface-ocean-top:          #b0e5e0;
  --surface-ocean-mid:          #2e7c90;
  --surface-ocean-bottom:       #0a153c;
  --surface-night-top:          #123b55;
  --surface-night-bottom:       #081c33;
  --surface-sand-night:         #31404b;
  --surface-page-light:         #fbfbfa;   /* Figma node 2:4 case page bg */
  --surface-aquarium-day-top:   #e5f3f5;   /* Figma node 102:17 stop  0% */
  --surface-aquarium-day-mid:   #c9e6ea;   /* Figma node 102:17 stop 62% */
  --surface-aquarium-day-bottom:#b0d9de;   /* Figma node 102:17 stop 100% */
  --surface-sand-day:           #e7dbc4;   /* Figma node 102:39 sand fill */


  /* -------------------- Colors: component surfaces -------------------- */

  --surface-card:               rgba(255, 255, 255, 0.96);
  --surface-status:             #ffffff;
  --surface-status-translucent: rgba(255, 255, 255, 0.94);
  --surface-chip-glass:         rgba(255, 255, 255, 0.5);
  --surface-linkedin:           rgba(255, 255, 255, 0.08);
  --surface-linkedin-day:       rgba(255, 255, 255, 0.55);   /* Figma node 102:44 */
  --surface-email:              #eaf9f6;
  --border-linkedin:            rgba(159, 195, 206, 0.45);
  --shadow-card:                0 8px 34px rgba(6, 40, 52, 0.3);
  --shadow-case-media:          0 4px 4px 0 rgba(0, 0, 0, 0.25);          /* Figma node 100:71 */
  --shadow-case-phone:          0 12px 11px rgba(28, 41, 107, 0.24);     /* Figma node 106:1158 */


  /* -------------------- Colors: ink, light theme -------------------- */

  --ink-title:                  #0b3a46;
  --ink-tagline:                #0e4655;
  --ink-hero-italic:            #0c3a46;
  --ink-card-title:             #12333d;
  --ink-card-sub:               #6b8087;
  --ink-card-body:              #41565e;
  --ink-bubble:                 #33505a;


  /* -------------------- Colors: ink, dark theme -------------------- */

  --ink-invert-strong:          #eaf9f6;
  --ink-invert:                 #e2f6f4;
  --ink-invert-muted:           #d6f4f0;
  --ink-invert-btn:             #dceff5;
  --ink-invert-signature:       #8fb5c2;
  --ink-back-surface:           #bfd9e0;
  --ink-day-signature:          #4f7b82;   /* Figma nodes 102:40 back link, 102:48 sign-off */
  --ink-day-email:              #faf9f6;   /* Figma node 102:47 Email button text */


  /* -------------------- Colors: case-card palettes -------------------- */

  --card-pm-chip:               #fbeaf0;
  --card-pm-accent:             #993556;
  --card-watchlight-chip:       #f6edd4;
  --card-watchlight-accent:     #8c6b14;
  --card-romans-chip:           #f9ece5;
  --card-romans-accent:         #9e5436;
  --card-iwish-chip:            #e1f5ee;
  --card-iwish-accent:          #0f6e56;
  --card-illi-chip:             #e4eff9;
  --card-illi-accent:           #00438d;
  --border-pm-soft:             rgba(153, 53, 86, 0.3);   /* Figma nodes 172:14, 172:17 press pill border */


  /* -------------------- Colors: case-study surfaces -------------------- */

  --surface-hero-plate:         #dcebe9;   /* Figma nodes 100:12, 100:73 */
  --surface-device-shell:       #000000;   /* Figma node 106:1158 phone body */


  /* -------------------- Colors: media letterboxes -------------------- */
  /* I Wish has an explicit solid fill behind the FIT video in Figma.  */
  /* illi-minate has none; per direction, use the card surface token. */

  --letterbox-iwish:            #fefefe;
  --letterbox-illi:             var(--surface-card);


  /* -------------------- Type: sizes -------------------- */

  --fs-display-hero:            96px;
  --fs-display-footer:          42px;
  --fs-monogram-footer:         40px;
  --fs-title-l:                 32px;
  --fs-title-m:                 30px;
  --fs-title-s:                 20px;      /* footer back link, Figma 102:40 */
  --fs-card-title:              21px;
  --fs-nav:                     20px;
  --fs-body:                    16px;
  --fs-body-s:                  15px;
  --fs-card-body:               14px;
  --fs-btn:                     14px;
  --fs-card-sub:                13px;
  --fs-bubble:                  13px;
  --fs-chip:                    12.5px;


  /* -------------------- Type: sizes, case-study (Figma node 2:4) -------------------- */

  --fs-case-hero-title:         38px;      /* 100:15 */
  --fs-case-hero-title-lg:      38px;      /* 121:31 (Watchlight hero title) */
  --fs-case-heading:            28px;      /* 100:53, 80, 107, 142 */
  --fs-case-pullout:            26px;      /* 100:121 */
  --fs-case-see-next-title:     17px;      /* 100:153, 156 */
  --fs-case-hero-sub:           15.5px;    /* 100:17 */
  --fs-case-body:               15px;      /* 100:55 + all prose */
  --fs-case-meta-value:         13.5px;    /* 100:22, 25, 28 */
  --fs-case-eyebrow:            11.5px;    /* 100:13, 51, 62, 78, 105, 118, 140, 148, 172:15, 18 */
  --fs-case-eyebrow-sm:         11px;      /* 100:74, 93, 100, 134 */
  --fs-case-meta-label:         10.5px;    /* 100:21, 24, 27, 152, 155 */
  --fs-case-arrow:              10px;      /* 172:16, 19 */
  --fs-case-press-label:        9.5px;     /* 172:13 */


  /* -------------------- Type: sizes, section rail (Figma node 6:9) -------------------- */

  --fs-rail-project:            18px;      /* 182:12 */
  --fs-rail-label:              12px;      /* 100:157–163 */


  /* -------------------- Type: line-heights -------------------- */

  --lh-tight:                   normal;
  --lh-card-body:               1.55;
  --lh-hero-italic:             1.7;
  --lh-seabed-body:             1.75;
  --lh-case-hero-title:         1.18;      /* Figma node 100:15 */
  --lh-case-heading:            1.25;      /* Figma nodes 100:53, 80, 107, 142 */
  --lh-case-pullout:            1.28;      /* Figma node 100:121 */
  --lh-case-stat-label:         1.45;      /* Figma nodes 100:43, 46, 49 */
  --lh-case-caption:            1.5;       /* Figma nodes 100:60, 76, 89, 97, 116, 131 */
  --lh-case-tight-body:         1.6;       /* Figma nodes 100:17, 100:101–103, 135, 136, 138 */
  --lh-case-body:               1.65;      /* Figma nodes 100:55, 66, 68 + all body prose */


  /* -------------------- Type: tracking -------------------- */

  --track-wordmark:             -0.96px;
  --track-kh-logo:              4.48px;
  --track-nav:                  0.8px;
  --track-hero-italic:          0.8px;
  --track-eyebrow:              2.56px;
  --track-case-eyebrow:         1.38px;    /* Figma nodes 100:13, 51, 62, 78, 105, 118, 140, 148 */
  --track-case-eyebrow-sm:      1.32px;    /* Figma nodes 100:74, 93, 100, 134 */
  --track-case-press-label:     1.33px;    /* Figma node 172:13 */
  --track-case-meta-label:      1.05px;    /* Figma nodes 100:21, 24, 27, 152, 155 */
  --track-rail-label:           0.72px;    /* Figma nodes 100:157–163 */


  /* -------------------- Opacities (from Figma) -------------------- */

  --opacity-nav-link:           0.68;
  --opacity-hero-italic:        0.62;
  --opacity-eyebrow:            0.60;
  --opacity-seabed-body:        0.85;


  /* -------------------- Radii -------------------- */

  --radius-card:                12px;
  --radius-chip-sm:             5px;
  --radius-chip:                8px;
  --radius-pill:                16px;
  --radius-status:              20px;
  --radius-btn:                 22px;
  --radius-case-tag:            4px;       /* Figma nodes 100:31, 33, 35, 37 */
  --radius-outcome:             10px;      /* Figma nodes 100:99, 133 */
  --radius-phone-screen:        15px;      /* Figma node 106:1159 */
  --radius-phone:               19px;      /* Figma node 106:1158 */
  --radius-pill-full:           999px;     /* Figma nodes 172:14, 172:17 */


  /* -------------------- Layout: page -------------------- */

  --layout-max:                 1440px;


  /* -------------------- Layout: case main (Figma node 6:8) -------------------- */

  --case-main-pad-x:            150px;
  --case-main-pad-top:          40px;
  --case-main-pad-bottom:       90px;
  --case-main-gap:              48px;


  /* -------------------- Layout: section rail (Figma node 6:9) -------------------- */

  --rail-w:                     140px;
  --rail-item-gap:              11px;      /* 6:9 gap-[11px] */
  --rail-project-pad-b:         10px;      /* 182:11 pb-[10px] */


  /* -------------------- Layout: case content sections (Figma node 2:4) -------------------- */

  --case-text-w:                760px;     /* body / heading max width */
  --case-media-h:               348px;     /* 100:12, 57, 70, 91, 113 */
  --case-media-h-lg:            395px;     /* 100:86, 128 */
  --case-section-gap:           56px;      /* 214:11, 100:40 */
  --case-hero-gap:              32px;      /* 214:12 */
  --case-block-gap:             24px;      /* 214:13, 15, 16, 19, 23, 26, 27, 28, 32, 34, 35 */
  --case-stack-gap:             12px;      /* 214:17, 20, 24, 29, 33, 36, 37, 39 */
  --case-media-gap:             8px;       /* image → caption */
  --case-tight-gap:             6px;       /* stat inner, See Next card inner */
  --case-meta-gap:              44px;      /* 100:19 */
  --case-meta-inner-gap:        5px;       /* 100:20, 23, 26 */
  --case-pair-gap:              16px;      /* 100:70, 91, 150 */
  --case-press-gap:             10px;      /* 172:12 */
  --case-press-pill-gap:        7px;       /* 172:14, 17 */
  --case-tag-gap-y:             8px;       /* 100:30 row-gap (column-gap reuses --tag-gap) */
  --case-outcome-gap:           9px;       /* 100:99, 133 */
  --case-pullout-border-w:      3px;       /* 100:120 */

  --case-tag-pad:               3px 9px;                 /* 100:31 */
  --case-press-pill-pad:        6px 12px 7px;            /* 172:14 top / x / bottom */
  --case-outcome-pad:           22px 26px 24px;          /* 100:99 top / x / bottom */
  --case-pullout-pad:           4px 22px;                /* 100:120 y / left */
  --case-see-next-pad:          12px 14px 14px;          /* 100:151 top / x / bottom */


  /* -------------------- Layout: device chrome (Figma nodes 106:1155–1163) -------------------- */

  --case-phone-w:               174px;    /* 106:1158 */
  --case-phone-h:               367px;    /* 106:1158 */
  --case-phone-screen-w:        162px;    /* 106:1159 */
  --case-phone-screen-inset:    5px;      /* 106:1159 top / bottom */
  --case-laptop-w:              637.59px; /* 106:1156 */
  --case-laptop-h:              421.809px;/* 106:1156 */


  /* -------------------- Layout: nav -------------------- */

  --nav-pad-x:                  40px;
  --nav-pad-y:                  20px;
  --nav-gap:                    18px;
  /* Derived: --nav-pad-y * 2 + --fs-title-l line box. Reserves a stable    */
  /* offset for the fixed nav so pages can push content below it and hash   */
  /* jumps land clear of the bar.                                           */
  --nav-h:                      calc(var(--nav-pad-y) * 2 + var(--fs-title-l) * 1.2);


  /* -------------------- Layout: hero -------------------- */

  --hero-pad-x:                 32px;
  --hero-pad-y:                 180px;
  --hero-stack-gap:             18px;
  --tagline-gap:                7px;
  --tagline-chip-pad:           2px 9px;


  /* -------------------- Layout: cards -------------------- */

  --cards-stack-gap:            40px;
  --cards-pad-top:              10px;
  --cards-pad-bottom:           16px;
  --card-w:                     640px;
  --card-media-h-pm:            405px;
  --card-media-h-std:           420px;
  --card-body-inset:            24px;
  --card-body-h:                160px;
  --card-title-y:               18px;
  --card-sub-y:                 43px;
  --card-desc-y:                62px;
  --card-tags-y:                117px;
  --tag-pad:                    3px 10px;
  --tag-gap:                    6px;
  --status-pad:                 3px 10px;
  --status-inset:               14px;


  /* -------------------- Layout: seabed -------------------- */

  --seabed-pad-x:               440px;
  --seabed-pad-top:             50px;
  --seabed-pad-bottom:          70px;
  --seabed-stack-gap:           16px;
  --seabed-eyebrow-h:           57px;
  --seabed-eyebrow-w:           220px;
  --seabed-title-h:             95px;
  --seabed-body-w:              560px;
  --seabed-h:                   518px;


  /* -------------------- Layout: footer -------------------- */

  --footer-h:                   563px;
  --footer-content-x:           460px;
  --footer-content-y:           197px;
  --footer-content-gap:         22px;
  --footer-btn-pad:             9px 20px;
  --footer-btn-gap:             10px;
  --footer-signoff-gap:         8px;
  --footer-sand-h:              52px;
  --footer-sand-top:            511px;
  --footer-back-x:              1188px;    /* Figma node 102:40 x         */
  --footer-back-y:              527px;     /* Figma node 102:40 y         */


  /* -------------------- Gradients -------------------- */

  --gradient-page:   linear-gradient(180deg,
                       var(--surface-ocean-top) 0%,
                       var(--surface-ocean-mid) 45%,
                       var(--surface-ocean-bottom) 100%);
  --gradient-footer: linear-gradient(180deg,
                       var(--surface-night-top) 0%,
                       var(--surface-night-bottom) 100%);
  --gradient-aquarium-day: linear-gradient(180deg,
                       var(--surface-aquarium-day-top)    0%,
                       var(--surface-aquarium-day-mid)   62%,
                       var(--surface-aquarium-day-bottom) 100%);
}