/* ============================================================
   Terratuga design tokens — web mirror of src/theme/tokens.ts
   (SKILL.md appendix). Palette: "Reef & Sun".

   This is the ONLY file in landing/ allowed to contain a raw hex
   value. Keep it identical to the appendix; if the two diverge,
   the appendix wins.

   Every contrast figure in the comments was measured, not
   estimated. The headline fact: every bright fill in this palette
   takes a DARK label. White on --shell is 1.91:1.

   One addition beyond the appendix, web-landing only:
     --fs-display-2xl / --lh-display-2xl  (44/48)
   ============================================================ */

:root {
  /* Terratuga has one appearance and it is a light one — there is no
     prefers-color-scheme block below, by design. Declaring it tells the
     browser to render form controls, scrollbars and the like to match,
     instead of darkening them under a dark OS setting. */
  color-scheme: light;

  /* --- Palette --- */
  --canvas: #EDFAFF;          /* pale aqua, not white */
  --surface: #FFFFFF;
  --surface-sunken: #DCF2FA;
  --ink: #10302C;             /* 13.31:1 on canvas */
  --ink-muted: #456260;       /* 6.22:1 — secondary text, placeholders */
  --ink-faint: #6B8688;       /* 3.66:1 — disabled/decorative only */
  --border: #CDEBF5;          /* 1.25:1 — ornament only */
  --border-strong: #688589;   /* 3.72:1 — control boundaries */

  --shell: #12D688;           /* the Terratuga green */
  --shell-dark: #07A266;      /* edge, pressed, AND control boundaries */
  --shell-tint: #C6FAE2;
  --shell-ink: #077A4B;       /* 5.06:1 — shell as text */

  --coral: #FF7A4D;
  --coral-dark: #DE5527;
  --coral-ink: #B33F1C;       /* 5.41:1 */

  --gold: #FFC81F;
  --gold-dark: #D79C00;
  --gold-ink: #846006;        /* 5.39:1 */

  --ocean: #17B8FF;
  --ocean-dark: #0090D8;
  --ocean-ink: #0A6E9C;       /* 5.30:1 */

  --berry: #B98BFF;
  --berry-dark: #8F56EE;
  --berry-ink: #6F2BD1;       /* 6.70:1 */

  --flamingo: #FF5C9C;
  --flamingo-dark: #E33A7C;
  --flamingo-ink: #C02460;    /* 5.38:1 */

  --success: #12D688;
  --success-dark: #07A266;
  --success-ink: #077A4B;     /* 5.06:1 */

  --error: #FF6B6B;
  --error-dark: #D93A3A;
  --error-ink: #C62626;       /* 5.32:1 */
  --error-edge: #A82424;

  --heart: #FF4D6D;           /* icon only — never a labelled fill */

  /* --- On-colours. Every bright fill takes a dark label.
         White survives on --error-dark alone. --- */
  --on-shell: #10302C;        /* 7.43:1  (white would be 2.30:1) */
  --on-coral: #10302C;        /* 5.50:1 */
  --on-gold: #10302C;         /* 9.14:1  (white would be 1.58:1) */
  --on-ocean: #10302C;        /* 6.30:1 */
  --on-berry: #10302C;        /* 5.54:1 */
  --on-flamingo: #10302C;     /* 4.90:1 */
  --on-success: #10302C;      /* 7.43:1 */
  --on-error: #10302C;        /* 5.11:1 */
  --on-error-dark: #FFFFFF;   /* 4.55:1 — the one white label */
  --on-shell-tint: #10302C;   /* 12.27:1 */

  /* --- Outlined display type. The ONE place white text is legal in
         this system. The glyph is measured against its own halo
         (16.28:1), not against whatever is behind it, which is what
         lets a title sit anywhere on the sky — including the deep blue
         at the bottom where no other colour can go. --- */
  --outline-halo: #0B2422;
  --outline-glyph: #FFFFFF;

  /* --- The sky. A three-stop background ramp, pale at the top and
         vivid at the bottom, mirroring `sky` in tokens.ts.

         The stop placement is load-bearing. --ink clears 4.5:1 against
         every stop (12.44:1 top, 10.37:1 mid, 4.80:1 bottom) and
         NOTHING else does: --ink-muted falls to 2.24:1 at the bottom
         and no boundary colour clears 3:1 anywhere on the ramp. So
         --ink may sit anywhere on the sky; everything else lives on a
         card. --- */
  --sky-top: #DCF4FF;
  --sky-mid: #B0E4FD;
  --sky-bottom: #1E9EE8;

  /* Cloud ornament. Deliberately not white: the top of the ramp is pale
     enough that white-on-white measured 1.14:1 and vanished. 1.35:1 on
     --sky-top — low on purpose, because scenery is not a boundary. */
  --art-cloud-tint: #9BD9FA;

  /* --- Tuga's own colours, MEASURED from the artwork rather than
         chosen. Held apart from the palette above because Tuga is a
         character, not a surface: a character's colours answer to the
         drawing, and retuning a UI token must never repaint the mascot.

         The page draws Tuga as an image, so nothing here paints him —
         these exist so anything placed next to him can be drawn from
         the same source. `npm run mascot:build` fails if any of them
         stops matching a colour the drawings actually contain. --- */
  --tuga-skin: #5E9C52;        /* head, limbs, the shell's outer rim */
  --tuga-skin-light: #8BD484;  /* the lit edge of a limb */
  --tuga-skin-shade: #528644;  /* where a limb turns away */
  --tuga-skin-deep: #407D38;   /* far-side limbs, fully in shadow */
  --tuga-sea: #038ED7;         /* the globe's ocean */
  --tuga-sea-deep: #0780BA;    /* shell underside, and the contact shadow */
  --tuga-land: #94D564;        /* continents */
  --tuga-land-light: #AEDF73;  /* the lit top of the shell */
  --tuga-trunk: #9E6E3C;       /* the travelling trunk strapped on top */
  --tuga-trunk-deep: #875623;
  --tuga-strap: #F4AF0B;
  --tuga-strap-shade: #DDB227;
  --tuga-sclera: #FAFEF7;      /* eye white — note it is NOT pure white */
  --tuga-pupil: #464846;       /* and the pupil is NOT pure black */
  --tuga-glint: #CCF8FD;

  /* --- Space: 4pt base. No value off this scale. --- */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 48px;

  /* --- Radius --- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* --- Elevation: solid offset edges, never blur. --- */
  --edge-chunky: 4px;
  --edge-card: 4px;
  --edge-hairline: 2px;

  /* --- Type --- */
  --font-display: 'Baloo 2', sans-serif;
  --font-ui: 'Nunito', sans-serif;

  --fs-display-2xl: 44px;  --lh-display-2xl: 48px;  /* web landing only */
  --fs-display-xl: 34px;   --lh-display-xl: 40px;
  --fs-display: 28px;      --lh-display: 34px;
  --fs-title: 22px;        --lh-title: 28px;
  --fs-headline: 17px;     --lh-headline: 22px;
  --fs-body: 17px;         --lh-body: 24px;
  --fs-callout: 15px;      --lh-callout: 20px;
  --fs-caption: 13px;      --lh-caption: 18px;
  --fs-overline: 11px;     --lh-overline: 14px;

  /* --- Motion --- */
  --duration-instant: 100ms;
  --duration-quick: 160ms;
  --duration-base: 240ms;
  --duration-slow: 360ms;
  --duration-celebrate: 600ms;
  /* Approximation of spring(damping 15, stiffness 180) for CSS. */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* --- Layout (not spacing; page-level measures) --- */
  --measure-page: 1120px;
  --measure-prose: 34ch;
}