/* GENERATED by CuriokidsRN/scripts/web/build-web.mjs — do not edit.
 *
 * Every value here is read out of the React Native app's own theme at build
 * time: colours from src/theme/colorSchema.ts, spacing from src/theme/spacing.ts,
 * radii from src/styles/GlobalStyles.ts.
 *
 * The web app used to carry a hand-copied palette, and five values were already
 * a generation stale — INK.muted was still the colour colorSchema had replaced.
 * Re-run `npm run build:web` after changing the theme.
 */
:root {
  /* Page and paper */
  --paper: #FFFFFF;
  --page: #FEF9F3;
  --page-warm: #F3E8D8;

  /* Brand */
  --teal: #18B4A8;
  --teal-deep: #3EA88F;
  --teal-ink: #12837B;
  --purple: #6C3CB4;
  --purple-deep: #8A6BC4;
  --coral: #F06054;
  --coral-deep: #E8853A;
  --sunny: #FCB714;

  /* Ink */
  --ink-strong: #240C54;
  --ink-muted: #5F5680;
  --ink-faint: #B3ACCC;

  /* Hue ink — headings on a coloured surface */
  --hue-purple: #4A3891;
  --hue-purple-soft: #5B47A8;
  --hue-lavender: #6A4CC0;
  --hue-pink: #B14B77;
  --hue-blue: #5E7FA6;
  --hue-sky: #4A7BA6;
  --hue-sky-strong: #2C5C82;
  --hue-mint: #0E8A5F;
  --hue-pink-deep: #6E3B54;
  --hue-butter: #8A7635;
  --hue-muted: #6E668A;

  /* Status */
  --status-done: #1FC776;
  --status-done-deep: #57B37E;
  --status-done-surface: #E6FBF0;
  --status-wrong: #FF5470;
  --status-wrong-deep: #D96476;
  --status-wrong-surface: #FFECF0;
  --status-attention: #F06054;
  --status-attention-surface: #FFF0EE;
  --status-danger: #D7263D;
  --status-danger-ink: #B23A31;

  /* Lines */
  --line-hairline: #EFEBF7;
  --line-switch-track-off: #E4DFEF;
  --line-disabled-fill: #DDD6EA;
  --line-disabled-edge: #C9C0DE;

  /* Pastel ramps — surface, panel, edge, chip, deep */
  --lavender-surface: #E7DDFF;
  --lavender-panel: #DACDFF;
  --lavender-edge: #C7B2FF;
  --lavender-chip: #BEA6FF;
  --lavender-deep: #9375EE;
  --sky-surface: #D7E9FF;
  --sky-panel: #C6E0FF;
  --sky-edge: #AFD5FF;
  --sky-chip: #84C8FF;
  --sky-deep: #4FB2F5;
  --pink-surface: #FFDCE9;
  --pink-panel: #FFCFE0;
  --pink-edge: #FFBBD1;
  --pink-chip: #FFA6C6;
  --pink-deep: #FF7CA8;
  --peach-surface: #FFE6CE;
  --peach-panel: #FFDAB6;
  --peach-edge: #FFC894;
  --peach-chip: #FFB877;
  --peach-deep: #FF9A45;
  --violet-surface: #EBE4FC;
  --violet-panel: #E2D9F9;
  --violet-edge: #D2C4F5;
  --violet-chip: #C3B2F0;
  --violet-deep: #AE97E7;
  --mint-surface: #DFF7EC;
  --mint-panel: #C9F1DE;
  --mint-edge: #A8E9CB;
  --mint-chip: #6FE6B6;
  --mint-deep: #22D19E;
  --butter-surface: #FFF4CC;
  --butter-panel: #FFEBA6;
  --butter-edge: #FFE07A;
  --butter-chip: #FFD84D;
  --butter-deep: #F2C224;

  /* Accents */
  --accent-grape-fill: #6C3CB4;
  --accent-grape-deep: #9375EE;
  --accent-grape-on-fill: #FFFFFF;
  --accent-orange-fill: #F0862F;
  --accent-orange-deep: #C25A12;
  --accent-orange-on-fill: #240C54;
  --accent-indigo-fill: #6D4FD8;
  --accent-indigo-deep: #4E36A8;
  --accent-indigo-on-fill: #FFFFFF;

  /* Feature ramps — aliases into the ramps above */
  --gk-surface: var(--lavender-surface);
  --gk-panel: var(--lavender-panel);
  --gk-edge: var(--lavender-edge);
  --gk-chip: var(--lavender-chip);
  --gk-deep: var(--lavender-deep);
  --gk-fill: var(--accent-grape-fill);
  --gk-fill-deep: var(--accent-grape-deep);
  --gk-on-fill: var(--accent-grape-on-fill);
  --language-surface: var(--sky-surface);
  --language-panel: var(--sky-panel);
  --language-edge: var(--sky-edge);
  --language-chip: var(--sky-chip);
  --language-deep: var(--sky-deep);
  --language-fill: var(--accent-grape-fill);
  --language-fill-deep: var(--accent-grape-deep);
  --language-on-fill: var(--accent-grape-on-fill);
  --stories-surface: var(--pink-surface);
  --stories-panel: var(--pink-panel);
  --stories-edge: var(--pink-edge);
  --stories-chip: var(--pink-chip);
  --stories-deep: var(--pink-deep);
  --stories-fill: var(--accent-grape-fill);
  --stories-fill-deep: var(--accent-grape-deep);
  --stories-on-fill: var(--accent-grape-on-fill);
  --riddles-surface: var(--peach-surface);
  --riddles-panel: var(--peach-panel);
  --riddles-edge: var(--peach-edge);
  --riddles-chip: var(--peach-chip);
  --riddles-deep: var(--peach-deep);
  --riddles-fill: var(--accent-orange-fill);
  --riddles-fill-deep: var(--accent-orange-deep);
  --riddles-on-fill: var(--accent-orange-on-fill);
  --safety-surface: var(--violet-surface);
  --safety-panel: var(--violet-panel);
  --safety-edge: var(--violet-edge);
  --safety-chip: var(--violet-chip);
  --safety-deep: var(--violet-deep);
  --safety-fill: var(--accent-indigo-fill);
  --safety-fill-deep: var(--accent-indigo-deep);
  --safety-on-fill: var(--accent-indigo-on-fill);
  --friends-surface: var(--lavender-surface);
  --friends-panel: var(--lavender-panel);
  --friends-edge: var(--lavender-edge);
  --friends-chip: var(--lavender-chip);
  --friends-deep: var(--lavender-deep);
  --friends-fill: var(--accent-grape-fill);
  --friends-fill-deep: var(--accent-grape-deep);
  --friends-on-fill: var(--accent-grape-on-fill);
  --parent-surface: var(--peach-surface);
  --parent-panel: var(--peach-panel);
  --parent-edge: var(--peach-edge);
  --parent-chip: var(--peach-chip);
  --parent-deep: var(--peach-deep);
  --parent-fill: var(--accent-orange-fill);
  --parent-fill-deep: var(--accent-orange-deep);
  --parent-on-fill: var(--accent-orange-on-fill);

  /* Spacing — the 4pt grid */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 20px;
  --space-xxl: 24px;
  --space-huge: 32px;
  --space-gap: 40px;

  /* Radius */
  --radius-sm: 14px;
  --radius-md: 20px;
  --radius-lg: 26px;
  --radius-xl: 34px;
  --radius-pill: 999px;
}