/* Nessy design system tokens — copied verbatim from .claude/skills/nessy-design/tokens/.
   The system's styles.css @imports these eight files; they are concatenated here so a
   marketing page does not pay for a three-deep render-blocking @import chain. The webfont
   @import from fonts.css moves to a <link> in each document's head for the same reason.
   Values are unchanged. Regenerate rather than hand-edit. */

/* --- tokens/colors.css --- */
:root{
  /* --- Brand ramps, sampled directly from the Nessy mark ---
     The mark is high-chroma and hard-outlined: near-black navy contour,
     saturated teal body, electric blue crest, orange wave accent.
     Nothing here is pastel; nothing here is warm except the wave. */
  --teal-50:#e7f8f5;--teal-100:#c4efe9;--teal-200:#94e2d8;--teal-300:#63d3c5;
  --teal-400:#40b8a8;--teal-500:#2aa697;--teal-600:#1c8b7e;--teal-700:#166f65;
  --teal-800:#12554e;--teal-900:#0d3b36;

  --lake-50:#e5f6fe;--lake-100:#c0eafd;--lake-200:#86d7fa;--lake-300:#45c1f4;
  --lake-400:#14b0ec;--lake-500:#00a8e4;--lake-600:#0087bb;--lake-700:#006b95;
  --lake-800:#005273;--lake-900:#003950;

  /* Sun is a hue-shift of the wave orange toward yellow (45°), not a
     free-standing yellow — related to the mark, but far enough from the
     orange ramp that the C and D bands never read as one color. It is
     the one light band: yellow cannot carry white text and still look
     yellow, so --grade-c takes navy. */
  --sun-50:#fff9e6;--sun-100:#ffefbb;--sun-200:#fcdf7a;--sun-300:#f9cd42;
  --sun-400:#f5bb14;--sun-500:#dda600;--sun-600:#b38400;--sun-700:#8a6200;
  --sun-800:#664800;--sun-900:#442f00;

  --orange-50:#fff3e6;--orange-100:#ffe1bf;--orange-200:#ffc383;--orange-300:#fca545;
  --orange-400:#f88f1a;--orange-500:#f58200;--orange-600:#cc6a00;--orange-700:#a05300;
  --orange-800:#7a4000;--orange-900:#522b00;

  --red-50:#fdecec;--red-100:#fbd4d3;--red-200:#f6a5a3;--red-300:#f07370;
  --red-400:#e8433f;--red-500:#dc2020;--red-600:#bc1a1a;--red-700:#971414;
  --red-800:#741111;--red-900:#4f0c0c;

  /* Ink is the mascot's contour: near-black, faintly navy. */
  --ink-900:#06112b;--ink-800:#0e2040;--ink-700:#1b3355;--ink-600:#35516f;
  --ink-500:#5d7590;--ink-400:#8ea0b5;--ink-300:#b9c5d3;--ink-200:#dce3eb;
  --ink-100:#eef2f7;--ink-50:#f7f9fc;

  /* Paper replaces the old cream: cool, neutral, no warmth. */
  --paper-50:#ffffff;--paper-100:#f7f9fc;--paper-200:#eef2f7;--paper-300:#e2e8f0;

  /* Belly mint — soft brand surface only, never text. */
  --mint-100:#eaf7f2;--mint-200:#cfeee2;--mint-300:#a9dcc9;

  --white:#ffffff;

  /* --- Semantic surfaces --- */
  --surface-app:var(--paper-100);
  --surface-card:var(--white);
  --surface-sunk:var(--paper-200);
  --surface-raised:var(--white);
  --surface-inverse:var(--ink-900);
  --surface-brand:var(--teal-500);
  --surface-brand-strong:var(--teal-600);
  --surface-brand-soft:var(--teal-50);
  --surface-lake-soft:var(--lake-50);
  --surface-sun-soft:var(--sun-50);

  /* --- Semantic text --- */
  --text-body:var(--ink-800);
  --text-strong:var(--ink-900);
  --text-muted:var(--ink-500);
  --text-faint:var(--ink-400);
  --text-on-brand:var(--white);
  --text-on-inverse:var(--paper-100);
  --text-link:var(--teal-700);
  --text-link-hover:var(--teal-800);

  /* --- Semantic lines --- */
  --line-hairline:var(--ink-200);
  --line-strong:var(--ink-900);
  --line-brand:var(--teal-500);
  --line-focus:var(--lake-500);

  /* --- Interactive --- */
  --action-primary:var(--teal-500);
  --action-primary-hover:var(--teal-600);
  --action-primary-press:var(--teal-700);
  --action-secondary:var(--white);
  --action-danger:var(--red-500);
  --action-disabled:var(--ink-200);
  --text-disabled:var(--ink-400);

  /* --- Grade scale: the app's most load-bearing color decision.
     Five hues in one continuous warm-shift, all pulled from the mark.
     No softening: an F is red, because it is. --- */
  --grade-a:var(--teal-500);
  --grade-a-soft:var(--teal-50);
  --grade-b:var(--lake-500);
  --grade-b-soft:var(--lake-50);
  --grade-c:var(--sun-400);
  --grade-c-soft:var(--sun-50);
  --grade-d:var(--orange-600);
  --grade-d-soft:var(--orange-50);
  --grade-f:var(--red-500);
  --grade-f-soft:var(--red-50);
  --grade-none:var(--ink-300);
  --grade-none-soft:var(--ink-100);

  /* Each band carries two text colors, because one fill color cannot
     serve both cases. -ink is the band's text on a tint or on white;
     -on is the text that goes ON the solid fill. Only C differs, and it
     differs because yellow is light. */
  --grade-a-ink:var(--teal-700);--grade-a-on:var(--white);
  --grade-b-ink:var(--lake-700);--grade-b-on:var(--white);
  --grade-c-ink:var(--sun-700);--grade-c-on:var(--ink-900);
  --grade-d-ink:var(--orange-700);--grade-d-on:var(--white);
  --grade-f-ink:var(--red-700);--grade-f-on:var(--white);
  --grade-none-ink:var(--ink-500);--grade-none-on:var(--white);

  /* --- Status --- */
  --status-success:var(--teal-600);
  --status-info:var(--lake-600);
  --status-warn:var(--orange-600);
  --status-danger:var(--red-500);
  --status-late:var(--orange-600);
  --status-missing:var(--red-600);
  --status-excused:var(--ink-400);
}

/* --- tokens/typography.css --- */
:root{
  --font-display:"Archivo","Trebuchet MS",system-ui,sans-serif;
  --font-text:"Instrument Sans","Helvetica Neue",system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;

  --weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;--weight-black:800;

  /* Display / headline (Archivo, tight tracking, heavy) */
  --type-hero-size:46px;--type-hero-lh:47px;--type-hero-track:-0.035em;
  --type-title-1-size:32px;--type-title-1-lh:35px;--type-title-1-track:-0.025em;
  --type-title-2-size:24px;--type-title-2-lh:28px;--type-title-2-track:-0.02em;
  --type-title-3-size:19px;--type-title-3-lh:24px;--type-title-3-track:-0.015em;

  /* Body (Instrument Sans) */
  --type-body-size:16px;--type-body-lh:24px;
  --type-body-sm-size:14px;--type-body-sm-lh:21px;
  --type-caption-size:12.5px;--type-caption-lh:17px;
  --type-label-size:11px;--type-label-lh:14px;--type-label-track:0.09em;

  /* Numeric / grade data (Archivo, tabular) */
  --type-score-xl-size:58px;--type-score-xl-lh:56px;
  --type-score-size:28px;--type-score-lh:30px;
  --type-score-sm-size:17px;--type-score-sm-lh:20px;
  --numeric-features:"tnum" 1; /* @kind other */
}

/* --- tokens/spacing.css --- */
:root{
  --space-0:0px;--space-1:2px;--space-2:4px;--space-3:6px;--space-4:8px;
  --space-5:12px;--space-6:16px;--space-7:20px;--space-8:24px;--space-9:32px;
  --space-10:40px;--space-11:48px;--space-12:64px;--space-13:80px;

  --gutter-mobile:16px;
  --gutter-web:32px;
  --card-pad:16px;
  --card-pad-lg:20px;
  --row-height:56px;
  --tap-min:44px;
  --content-max:1160px;
  --sidebar-w:248px;
  --tabbar-h:64px;
  --topbar-h:56px;
}

/* --- tokens/radius.css --- */
:root{
  /* Tightened to match the mark's hard, flat-vector construction.
     Nothing in the UI is rounder than a 18px card corner; the pill is
     reserved for grade chips and toggles. */
  --radius-xs:4px;
  --radius-sm:6px;
  --radius-md:10px;
  --radius-lg:14px;
  --radius-xl:18px;
  --radius-pill:999px;
  --border-hairline:1px;
  --border-strong:2px; /* the mascot's contour weight, translated to UI */
}

/* --- tokens/elevation.css --- */
:root{
  /* The mark has no gradients and no soft light. Elevation is a hard,
     un-blurred offset in the contour color — 2px, not 3px — and blur is
     reserved for things that genuinely float over content. */
  --shadow-hard-sm:0 1px 0 0 rgba(6,17,43,.16);
  --shadow-hard:0 2px 0 0 rgba(6,17,43,.14);
  --shadow-hard-brand:0 2px 0 0 var(--teal-700);
  --shadow-hard-ink:0 2px 0 0 var(--ink-900);
  --shadow-soft:0 1px 2px rgba(6,17,43,.06),0 6px 16px -6px rgba(6,17,43,.10);
  --shadow-overlay:0 12px 32px -8px rgba(6,17,43,.24),0 2px 6px rgba(6,17,43,.08);
  --shadow-inset-sunk:inset 0 1px 0 rgba(6,17,43,.05);
  --ring-focus:0 0 0 3px rgba(0,168,228,.40);
}

/* --- tokens/motion.css --- */
:root{
  /* Mechanical, not springy. Nothing overshoots — a grade is information,
     not a celebration. */
  --dur-instant:80ms; /* @kind other */
  --dur-fast:130ms; /* @kind other */
  --dur-base:180ms; /* @kind other */
  --dur-slow:280ms; /* @kind other */
  --dur-reveal:420ms; /* @kind other */
  --ease-out:cubic-bezier(.2,.8,.25,1); /* @kind other */
  --ease-in-out:cubic-bezier(.5,0,.3,1); /* @kind other */
  --press-shift:1px; /* pressed controls drop onto their own shadow */
}

/* --- tokens/base.css --- */
*{box-sizing:border-box}
body{margin:0;background:var(--surface-app);color:var(--text-body);font-family:var(--font-text);font-size:var(--type-body-size);line-height:var(--type-body-lh);-webkit-font-smoothing:antialiased;text-wrap:pretty}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--text-strong);margin:0;letter-spacing:var(--type-title-2-track)}
h1{font-size:var(--type-title-1-size);line-height:var(--type-title-1-lh);font-weight:var(--weight-bold)}
h2{font-size:var(--type-title-2-size);line-height:var(--type-title-2-lh);font-weight:var(--weight-bold)}
h3{font-size:var(--type-title-3-size);line-height:var(--type-title-3-lh);font-weight:var(--weight-semibold)}
p{margin:0}
a{color:var(--text-link);text-decoration:none;font-weight:var(--weight-semibold)}
a:hover{color:var(--text-link-hover);text-decoration:underline;text-underline-offset:2px}
button{font-family:inherit}
.nessy-num{font-variant-numeric:tabular-nums;font-feature-settings:var(--numeric-features)}
.nessy-label{font-family:var(--font-text);font-size:var(--type-label-size);line-height:var(--type-label-lh);letter-spacing:var(--type-label-track);text-transform:uppercase;font-weight:var(--weight-bold);color:var(--text-muted)}
:focus-visible{outline:none;box-shadow:var(--ring-focus)}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}