/* ============================================================================
   Orb Workday — design tokens
   Palette, type and motion values are taken from ampcode.com's own stylesheet
   (Root.996d893687e28d31.css) so the piece sits in Amp's visual world rather
   than approximating it. Every pair below has been checked for WCAG AA.
   ========================================================================= */

/* --- Typefaces (all self-hosted, see assets/fonts/) ---------------------- */

@font-face {
  font-family: "PolySans";
  src: url("../assets/fonts/PolySans-variable.woff2") format("woff2-variations");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PolySans";
  src: url("../assets/fonts/PolySansItalic-variable.woff2") format("woff2-variations");
  font-weight: 300 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Sagittaire Display";
  src: url("../assets/fonts/SagittaireDisplay-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sagittaire Display";
  src: url("../assets/fonts/SagittaireDisplay-Extralight.woff2") format("woff2");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sagittaire Display";
  src: url("../assets/fonts/SagittaireDisplay-ExtralightItalic.woff2") format("woff2");
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Sagittaire Display";
  src: url("../assets/fonts/SagittaireDisplay-ThinItalic.woff2") format("woff2");
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Sagittaire Text";
  src: url("../assets/fonts/SagittaireText-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sagittaire Text";
  src: url("../assets/fonts/SagittaireText-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sagittaire Text";
  src: url("../assets/fonts/SagittaireText-MediumItalic.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Berkeley Mono";
  src: url("../assets/fonts/TX-02-Variable.woff2") format("woff2-variations");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

/* --- Palette ------------------------------------------------------------- */
/* Dark is the primary theme. Light is a full first-class alternative, not a
   tint pass. Both are declared on bare :root so nothing depends on a media
   query alone. */

:root {
  color-scheme: dark;

  /* Amp's own greens-blacks and off-whites */
  --bg:              #0b0d0b;
  --bg-raised:       #12150f;
  --bg-sunken:       #070806;
  --fg:              #f6fff5;
  --fg-muted:        #9ca49c;   /* 7.0:1 on --bg */
  /* Both foreground greys clear 4.5:1 against every surface they can land on —
     the page, the raised panel, the sunken panel, and the translucent card
     composited over either. `--fg-faint` is the faintest value that still does,
     measured against the *composited* pixel rather than the base background,
     because these tokens are read on nested panels far more often than on the
     bare page. It is no longer a large-text-only token. */
  --fg-faint:        #7f877f;   /* 4.98:1 on the raised panel — AA for normal text */
  --line:            #878b8633;
  --line-strong:     #878b8659;

  --brand:           #f34e3f;   /* Amp red. 5.6:1 on --bg */
  --brand-ink:       #0b0d0b;   /* text ON brand fills — 5.6:1 */
  --success:         #54b879;
  --danger:          #d67670;
  --warn:            #d6a038;
  --link:            #6ca0e0;
  --info:            #7fd4dc;

  /* Orb state colours — each is paired with an icon and a word, never alone */
  --state-provisioning: #7fd4dc;
  --state-setup:        #d6a038;
  --state-ready:        #9ca49c;
  --state-working:      #54b879;
  --state-paused:       #6f8fbf;
  --state-failed:       #d67670;
  --state-resuming:     #b79ce8;

  /* Surfaces */
  --card:            #f6fff508;
  --card-hover:      #f6fff512;
  --card-active:     #f6fff51c;
  --inset:           #00000059;
  --focus:           #f6fff5;
  --focus-offset:    #0b0d0b;
  --glint:           #ffffff1f;

  --grid-dot:        #f6fff50f;
  --bg-image:        url("../assets/img/background_dark.jpg");

  /* --- Type scale (matches Amp's compact, restrained sizing) ------------- */
  --font-display: "Sagittaire Display", "Iowan Old Style", Georgia, serif;
  --font-text:    "Sagittaire Text", "Iowan Old Style", Georgia, serif;
  --font-sans:    "PolySans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "Berkeley Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* --- Type scale ---------------------------------------------------------
     Set large and comfortable on purpose. The floor is 1rem (16px): nothing
     that carries meaning — label, caption, stat readout, HUD figure — is
     allowed below it, so there is no small print anywhere in the piece. UI
     body is 20px, reading body is 22px, and the scale stays generous on a
     phone rather than collapsing.

     Amp sets its own hero enormous because its headline is two short words a
     line. Ours run longer, so the ceiling is lower — the same scale
     relationship, not the same absolute number. */
  --t-2xs:  1rem;        /* 16px — the floor. Labels, eyebrows, captions. */
  --t-xs:   1.0625rem;   /* 17px */
  --t-sm:   1.125rem;    /* 18px */
  --t-md:   1.25rem;     /* 20px — UI body */
  --t-lg:   1.375rem;    /* 22px — reading body, ledes */
  --t-xl:   1.75rem;     /* 28px */
  --t-2xl:  2.25rem;     /* 36px */
  --t-3xl:  2.75rem;     /* 44px */
  --t-4xl:  3.5rem;      /* 56px */
  --t-5xl:  clamp(2.5rem, 5vw, 4rem);
  --t-6xl:  clamp(2.875rem, 7vw, 6rem);

  /* Larger text wants a slightly tighter ratio, not a looser one. */
  --lh-tight: 1.02;
  --lh-snug:  1.25;
  --lh-body:  1.55;
  --tracking-tight: -0.025em;
  --tracking-wide:  0.08em;

  /* --- Space, radius, depth --------------------------------------------- */
  --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: 9rem;

  --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-xl: 18px; --r-pill: 999px;

  --shadow-sm: 0 1px 2px #00000073, 0 0 0 1px #ffffff14;
  --shadow-md: 0 8px 24px -8px #000000a6, 0 0 0 1px #ffffff14;
  --shadow-lg: 0 24px 60px -20px #000000cc, 0 0 0 1px #ffffff1a;

  /* --- Motion ------------------------------------------------------------
     Weighted curves, not defaults. --ease-orb is the house curve: a slow,
     heavy settle that reads as mass. */
  --ease-orb:    cubic-bezier(0.16, 0.84, 0.24, 1);
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-snap:   cubic-bezier(0.34, 1.56, 0.64, 1);

  --d-fast:   140ms;
  --d-mid:    280ms;
  --d-slow:   520ms;
  --d-settle: 900ms;

  /* Measure grows with the type: at 22px these hold ~62–68 characters, which
     is where long-form reading stays comfortable. */
  --page-max: 84rem;
  --prose-max: 44rem;
  --tap: 44px;                 /* minimum touch target */
}

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

  --bg:              #fafaf8;
  --bg-raised:       #ffffff;
  --bg-sunken:       #efefea;
  --fg:              #0b0d0b;
  --fg-muted:        #595959;   /* 7.0:1 on --bg */
  --fg-faint:        #6b6b6b;   /* 4.62:1 on the sunken panel — AA for normal text */
  --line:            #878b8640;
  --line-strong:     #878b8673;

  --brand:           #c9291a;   /* darkened from #f34e3f to clear 4.5:1 on #fafaf8 */
  --brand-ink:       #fffefc;
  /* Deepened from #2f8052, which cleared 4.5:1 on the page and on a raised
     card but not on the pixels this green is actually read against: the
     sunken panel, the translucent card over the page, the brand tint behind
     a selected orb size, and the success tint behind a mission debrief. It
     carries normal-size text — feed narration, mission grades, the "best
     value" hint — so the normal-text floor applies, not the large-text one.
     Deepened rather than desaturated: saturation actually rises (0.46 -> 0.54
     HSL), so it still reads as green and stays clear of --danger and --warn.
     Worst measured surface: 5.01:1. */
  --success:         #206b42;
  --danger:          #b03a34;
  --warn:            #7d5608;
  --link:            #286bbd;
  --info:            #196b73;

  --state-provisioning: #196b73;
  --state-setup:        #7d5608;
  --state-ready:        #595959;
  --state-working:      #206b42;   /* tracks --success; same surfaces, same floor */
  --state-paused:       #3c5f96;
  --state-failed:       #b03a34;
  --state-resuming:     #6742a8;

  --card:            #0b0d0b08;
  --card-hover:      #0b0d0b12;
  --card-active:     #0b0d0b1c;
  --inset:           #0b0d0b0f;
  --focus:           #0b0d0b;
  --focus-offset:    #fafaf8;
  --glint:           #ffffffcc;

  --grid-dot:        #0b0d0b14;
  --bg-image:        url("../assets/img/background_light.jpg");

  --shadow-sm: 0 1px 2px #0b0d0b1a, 0 0 0 1px #0b0d0b12;
  --shadow-md: 0 8px 24px -10px #0b0d0b26, 0 0 0 1px #0b0d0b14;
  --shadow-lg: 0 24px 60px -24px #0b0d0b33, 0 0 0 1px #0b0d0b1a;
}