/* Scrolling Stories design tokens. The only file that defines raw colour, type, spacing,
   radius, shadow, motion and layer values for product chrome. Every stylesheet references
   these properties; story content (fonts, looks, author CSS) is out of scope.
   Spec: docs/design-system/foundations.md */
:root {
  /* ---- Surfaces ---- */
  --ss-paper: #f3efe6;            /* page background */
  --ss-print: #fffcf6;            /* panels, cards, sheets, fields */
  --ss-fill: #e9e3d6;             /* tab tracks, selected nav item, placeholders */
  --ss-surround: #e6e0d3;         /* area around the preview stage */
  --ss-white: #ffffff;              /* photo borders, text on filled accents */
  --ss-fill-highlight: #f0eadf;     /* skeleton shimmer */
  --ss-stage: #121412;            /* anything that shows the story */

  /* ---- Lines ---- */
  --ss-line: #e0d9cb;             /* dividers; decorative only */
  --ss-line-control: #8f8676;     /* edge of a control; 3:1 on paper and print (WCAG 1.4.11) */

  /* ---- Text ---- */
  --ss-ink: #26231e;              /* body text */
  --ss-ink-heading: #233329;      /* serif titles and headings */
  --ss-ink-2: #5a5448;            /* secondary text */
  --ss-ink-3: #6f685b;            /* hints, placeholders, meta; 4.5:1 on paper and print only */
  --ss-ink-on-dark: #f3efe6;      /* text on stage and on filled accents */

  /* ---- Accents ---- */
  --ss-forest: #2e4b3c;           /* primary action, links, selection, focus */
  --ss-forest-hover: #243b2f;
  --ss-forest-active: #1c3025;
  --ss-forest-tint: #e4ebe3;      /* selected row, featured tag */
  --ss-ochre: #9c6b2e;            /* chapters: flags, rules, icons */
  --ss-ochre-text: #7a521d;       /* ochre as text (4.5:1) */
  --ss-ochre-tint: #f1e5cf;
  --ss-terracotta: #b0543a;       /* playhead; destructive icons and fills */
  --ss-terracotta-text: #9a4630;  /* destructive text (4.5:1 on paper) */
  --ss-terracotta-tint: #f6e2da;
  --ss-moss: #3e5a2e;             /* published, success */
  --ss-moss-tint: #e6ecdc;
  --ss-heather: #5d5078;          /* private link, members-only mark */
  --ss-heather-tint: #ebe6ef;

  /* ---- Provider marks (#229): a sign-in button wears its provider's own colour ---- */
  --ss-brand-google: #ffffff;     /* Google: a white button, the coloured G, a grey border */
  --ss-brand-apple: #000000;      /* Apple: black, with a white mark and label */
  --ss-brand-facebook: #0866ff;   /* Facebook blue; a white label reads at 4.8:1 */

  /* ---- Focus ---- */
  --ss-focus: var(--ss-forest);
  --ss-focus-on-dark: #b8d3b0;    /* focus and active state on stage and reader chrome */

  /* ---- Timeline lanes (white text passes 4.5:1 on each) ---- */
  --ss-lane-photo: #577687;
  --ss-lane-photo-tint: #e1e8ea;
  --ss-lane-text: #4f7a5e;
  --ss-lane-text-tint: #e1ebe2;
  --ss-lane-map: #5f7433;
  --ss-lane-overlay: #985f72;
  --ss-lane-sound: #5d5078;
  --ss-lane-backdrop: #6e5f86;
  --ss-lane-advanced: #7d6a58;

  /* ---- Reader chrome (over the author's imagery) ---- */
  --ss-chrome-bg: rgba(14, 16, 14, 0.72);
  --ss-chrome-bg-strong: rgba(14, 16, 14, 0.9);
  --ss-chrome-blur: 10px;
  --ss-chrome-track: rgba(243, 239, 230, 0.32);

  /* ---- Type ---- */
  --ss-font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --ss-font-ui: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ss-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --ss-display-xl: 2.875rem;      /* 46px public story title */
  --ss-display-l: 2.5rem;         /* 40px page title */
  --ss-display-m: 1.75rem;        /* 28px card headline */
  --ss-display-s: 1.25rem;        /* 20px inspector and panel title */
  --ss-display-xs: 1.0625rem;     /* 17px story card and list titles */
  --ss-text-lg: 1rem;             /* 16px long help, public body */
  --ss-text-md: 0.875rem;         /* 14px default UI text */
  --ss-text-sm: 0.8125rem;        /* 13px controls, table cells, secondary */
  --ss-text-xs: 0.75rem;          /* 12px labels, meta; the floor */
  --ss-text-field: var(--ss-text-md);  /* text typed into a field; 16px on touch, see below */

  --ss-leading-tight: 1.1;
  --ss-leading-ui: 1.45;
  --ss-leading-prose: 1.65;
  --ss-weight-regular: 400;
  --ss-weight-medium: 500;
  --ss-weight-semibold: 600;

  /* ---- Space (4px grid) ---- */
  --ss-space-1: 0.25rem;
  --ss-space-2: 0.5rem;
  --ss-space-3: 0.75rem;
  --ss-space-4: 1rem;
  --ss-space-5: 1.25rem;
  --ss-space-6: 1.5rem;
  --ss-space-8: 2rem;
  --ss-space-10: 2.5rem;
  --ss-space-12: 3rem;
  --ss-space-16: 4rem;

  /* ---- Radius ---- */
  --ss-radius-xs: 3px;            /* thumbnails */
  --ss-radius-sm: 6px;            /* tags, timeline blocks, stage */
  --ss-radius-md: 8px;            /* buttons, fields, chips, list rows */
  --ss-radius-lg: 12px;           /* cards, menus, dialogs */
  --ss-radius-xl: 16px;           /* bottom sheets, reader bar */
  --ss-radius-round: 999px;       /* avatars, switches, dots */

  /* ---- Size ---- */
  --ss-control-sm: 28px;          /* timeline and toolbar controls */
  --ss-control-md: 34px;          /* default desktop control */
  --ss-control-lg: 42px;          /* page-level call to action */
  --ss-touch: 44px;               /* minimum target on touch layouts */
  --ss-icon-sm: 16px;
  --ss-icon-md: 20px;

  /* ---- Elevation ---- */
  --ss-shadow-print: 0 1px 2px rgba(38, 35, 30, 0.12), 0 3px 8px rgba(38, 35, 30, 0.06);
  --ss-shadow-raised: 0 1px 2px rgba(38, 35, 30, 0.08);
  --ss-shadow-menu: 0 10px 24px rgba(38, 35, 30, 0.14), 0 2px 6px rgba(38, 35, 30, 0.08);
  --ss-shadow-dialog: 0 24px 48px rgba(38, 35, 30, 0.2), 0 8px 16px rgba(38, 35, 30, 0.1);
  --ss-shadow-stage: 0 14px 34px rgba(38, 35, 30, 0.2);
  --ss-scrim: rgba(38, 35, 30, 0.45);

  /* ---- Motion (chrome only; story motion is the renderer's) ---- */
  --ss-duration-fast: 120ms;
  --ss-duration-base: 200ms;
  --ss-duration-slow: 320ms;
  --ss-ease: cubic-bezier(0.2, 0, 0, 1);

  /* ---- Layers ---- */
  --ss-z-sticky: 10;
  --ss-z-menu: 100;
  --ss-z-sheet: 200;
  --ss-z-dialog: 300;
  --ss-z-toast: 400;

  /* ---- Layout ---- */
  --ss-topbar-h: 56px;
  --ss-sidebar-w: 240px;
  --ss-storyboard-w: 268px;
  --ss-inspector-w: 336px;
  --ss-timeline-h: 254px;
  --ss-tabbar-h: 66px;
  --ss-content-max: 1200px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ss-duration-fast: 0ms;
    --ss-duration-base: 0ms;
    --ss-duration-slow: 0ms;
  }
}

/* iOS Safari magnifies the page when a field it focuses has text under 16px, and never
   undoes it. Every field on a touch layout is at least that. */
@media (pointer: coarse) {
  :root {
    --ss-text-field: 1rem;
  }
}

/* The display steps drop on a phone: a 46px or 40px page title is a line and a half of a
   344px screen, and every page opens with one. The ladder stays three wide so a section
   heading never reads as loud as the page's own name. */
@media (max-width: 599px) {
  :root {
    --ss-display-xl: 2rem;          /* 32px */
    --ss-display-l: 1.75rem;        /* 28px */
    --ss-display-m: 1.375rem;       /* 22px */
  }
}

/* Breakpoints (custom properties can't be used in media queries; use these literals):
   phone < 600px · tablet 600–959px · desktop ≥ 960px (editor switches layout here) · wide ≥ 1440px */