/* Values transcribed verbatim from Draw-Now (SwiftUI Color literals) and
   doodle-daily-lp/app/globals.css. Do not round.

   ONE DEVIATION, made deliberately: the app's status colours were Apple's system
   palette (#FF3B30, #34C759, #FF9500, #007AFF, #AF52DE→#FF2D55). Those are iOS
   defaults, not Doodle Daily — dropped onto warm beige they read as borrowed. The
   semantic set below is re-derived inside the brand's own warm, dusty family so
   status and chrome feel like one palette. Brand hexes, surfaces and the drawing
   crayons are untouched: the crayons are CONTENT (the real colours users draw
   with, from ColorPickerView.swift) and must never be restyled. */
:root{
  /* ── Brand ─────────────────────────────────────────────── */
  --dd-red:#DB553E;            /* wordmark "Doodle", LP --primary */
  --dd-blue:#7CB2CC;           /* wordmark "Daily.", app action colour (0.486,0.698,0.8) */
  --dd-yellow:#FFFF00;         /* the dot after "Daily.", LP --accent */
  --dd-ink:#000000;            /* app text is literal black, not a near-black */
  --dd-white:#FFFFFF;

  /* ── Brand, extended ───────────────────────────────────── */
  /* Two darker relatives so brand colour can carry small text and glyphs on
     light surfaces, where #DB553E and #7CB2CC are too light to pass. */
  --dd-red-deep:#B33F2C;       /* destructive, errors — brand red, driven darker */
  --dd-blue-deep:#4A87A6;      /* informational glyphs, locks, mentions */
  --dd-sage:#5E9B74;           /* the dusty green that belongs beside #7CB2CC */
  --dd-amber:#E39A3C;          /* sits between brand red and brand yellow */

  /* ── Beige family (the app is warm, never pure white) ──── */
  --dd-beige-canvas:#F2EDE8;   /* Color(0.95,0.93,0.91) — every app screen background */
  --dd-beige-raised:#EDE8E3;   /* Color(0.93,0.91,0.89) — toolbars, size slider, unread rows */
  --dd-beige-web:#EDE8E2;      /* rgb(237,232,226) — marketing site background */
  --dd-beige-prompt:#F2EDE8;   /* prompt header pill (0.95,0.93,0.91) */

  /* ── Greys / ink ───────────────────────────────────────── */
  --dd-grey-tool:#665961;      /* Color(0.4,0.35,0.38) — inactive drawing tool */
  --dd-grey-secondary:#655F59; /* warm secondary label. Was #8A8A8E, a cool iOS stand-in that
                                  measured 2.99:1 on --dd-beige-canvas and failed AA. 5.48:1 here. */
  --dd-grey-hairline:rgba(128,128,128,.2); /* Color.gray.opacity(0.2) strokes */
  --dd-grey-scrim:rgba(0,0,0,.4);          /* submitted-canvas overlay */
  --dd-grey-caption-scrim:rgba(0,0,0,.5);  /* prompt label over a thumbnail */

  /* ── Semantic / state — all brand-derived ──────────────── */
  --dd-heart:var(--dd-red);              /* the like glyph is brand red, not Apple red */
  --dd-heart-fill:rgba(219,85,62,.18);   /* liked pill fill */
  --dd-reaction:var(--dd-red);           /* reaction notifications */
  --dd-reaction-tint:rgba(219,85,62,.14);
  --dd-success:var(--dd-sage);           /* submitted, unlocked reward */
  --dd-success-tint:rgba(94,155,116,.16);
  --dd-warning:var(--dd-amber);          /* streak flame, time running out */
  --dd-warning-tint:rgba(227,154,60,.16);
  --dd-danger:var(--dd-red-deep);        /* validation errors, destructive — never a plain CTA */
  --dd-info:var(--dd-blue-deep);         /* locks, PRO chips, @mentions */
  --dd-info-tint:rgba(74,135,166,.14);

  /* Premium is the brand's yellow — the wordmark's flourish, used like a gold
     star. Always a small fill carrying INK text, never large and never as type. */
  --dd-premium:var(--dd-yellow);
  --dd-premium-tint:rgba(255,255,0,.28);
  --dd-premium-ink:var(--dd-ink);

  /* ── Drawing palette: the 8 free crayons (CONTENT — do not restyle) ── */
  --dd-draw-black:#000000;
  --dd-draw-red:#FF3B30;
  --dd-draw-orange:#FF9500;
  --dd-draw-yellow:#FFCC00;
  --dd-draw-green:#34C759;
  --dd-draw-blue:#007AFF;
  --dd-draw-purple:#AF52DE;
  --dd-draw-brown:#A2845E;

  /* ── Semantic aliases (use these in components) ────────── */
  --surface-app:var(--dd-beige-canvas);
  --surface-raised:var(--dd-beige-raised);
  --surface-card:var(--dd-white);
  --surface-web:var(--dd-beige-web);
  --surface-disabled:var(--dd-beige-raised);

  --text-primary:var(--dd-ink);
  --text-secondary:var(--dd-grey-secondary);
  --text-inverse:var(--dd-white);
  --text-link:var(--dd-blue-deep);
  --text-error:var(--dd-danger);

  /* Brand fills carry INK, not white — see guidelines/accessibility.card.html.
     White on #7CB2CC is 2.31:1; ink is 9.09:1. The one exception is --dd-red-deep,
     which is dark enough to carry white (5.73:1) and does so for destructive buttons. */
  --action-primary:var(--dd-blue);
  --action-primary-text:var(--dd-ink);
  --action-primary-ghost:var(--dd-blue-deep); /* blue as TEXT needs the deep relative, not #7CB2CC */
  --action-commit:var(--dd-ink);           /* final & weighty, no warning connotation */
  --action-commit-text:var(--dd-white);
  --action-destructive:var(--dd-red-deep); /* red means destructive, and only destructive */
  --border-hairline:var(--dd-grey-hairline);
  --border-focus:var(--dd-blue-deep);
}