/* Dokima.AI — Color tokens (v2: warm-brown direction)
   Brown becomes the ink; cream warms; orange stays the scoring accent.
   Two-layer surfaces: soft on the marketing layer, tight inside the product. */

:root {
  /* ---- Brand core ---- */
  --dk-orange: #ff5a09;        /* primary scoring orange */
  --dk-orange-2: #ff9c09;      /* gradient end */
  --dk-amber: #ff8a1f;         /* gauge fill / partial scores */
  --dk-orange-deep: #f06210;   /* pressed */
  --dk-brown: #4a3018;         /* mid brown — accents, dark buttons */
  --dk-brown-deep: #2e1d0e;    /* espresso — headings / darkest ink */
  --dk-red: #e5484d;           /* red flags / destructive */
  --dk-green: #1f8a5b;         /* passed scores */

  /* ---- Warm neutrals (brown-cream) ---- */
  --dk-cream: #f7f4ef;         /* app / page background */
  --dk-white: #ffffff;         /* card / surface */
  --dk-sand: #faf7f2;          /* muted surface */
  --dk-sand-2: #fcfaf7;        /* faint header fill */
  --dk-ink: #3a2614;           /* body text — warm brown */
  --dk-ink-soft: #6f5b48;      /* secondary text */
  --dk-muted: #9c8b78;         /* muted text / icons / taupe */
  --dk-border: #ece3d7;        /* hairline border */
  --dk-border-strong: #ddcfbe; /* stronger border */
  --dk-dot: #e4d9c9;           /* dot-grid texture */
  --dk-input: #f3ece2;         /* input / track fill */

  /* ---- Semantic aliases (use these in components) ---- */
  --background: var(--dk-cream);
  --foreground: var(--dk-ink);
  --heading: var(--dk-brown-deep);     /* titles use deep brown, not black */
  --card: var(--dk-white);
  --card-foreground: var(--dk-ink);
  --popover: var(--dk-white);
  --popover-foreground: var(--dk-ink);
  --primary: var(--dk-orange);
  --primary-foreground: #ffffff;
  --secondary: var(--dk-sand);
  --secondary-foreground: var(--dk-ink-soft);
  --muted: var(--dk-sand);
  --muted-foreground: var(--dk-muted);
  --accent: var(--dk-orange);
  --accent-foreground: #ffffff;
  --destructive: var(--dk-red);
  --destructive-foreground: #ffffff;
  --border: var(--dk-border);
  --border-soft: var(--dk-border);
  --border-strong: var(--dk-border-strong);
  --ring: var(--dk-orange);

  /* Score / chart ramp */
  --chart-1: var(--dk-orange);
  --chart-2: var(--dk-amber);
  --chart-3: var(--dk-orange-2);
  --chart-4: var(--dk-orange-deep);
  --chart-5: var(--dk-muted);

  /* Signature gradient */
  --gradient-orange: linear-gradient(98deg, #ff5a09 0%, #ff9c09 100%); /* @kind color */
}