/* ============================================================================
   easynikah — Design Tokens
   Palette sampled from Safavid mosque tilework, Isfahan
   (Sheikh Lotfollah & Emam/Shah Mosque — gold-dome-on-cobalt-tile contrast).
   Theme: dark, single warm accent (gold) + cool jewel (turquoise) on cobalt.

   Layers:
     1. PRIMITIVES — raw, named values. Do not reference directly in components.
     2. SEMANTIC   — role-based aliases. Use THESE in components.
   ============================================================================ */

:root {
  /* ── 1. PRIMITIVES ──────────────────────────────────────────────────── */

  /* Cobalt indigo (the blue tile field) */
  --c-cobalt-950: #070e28;  /* deepest */
  --c-cobalt-900: #0b1538;  /* base */
  --c-cobalt-850: #0e1c4a;  /* raised surface */
  --c-cobalt-800: #16235e;
  --c-cobalt-700: #1d2d78;
  --c-cobalt-600: #23368c;  /* most saturated */

  /* Antique gold (the Sheikh Lotfollah dome) */
  --c-gold-700: #a8812f;  /* gold-deep */
  --c-gold-500: #cda44e;  /* gold */
  --c-gold-300: #e8c87e;  /* gold-light */

  /* Turquoise (the rope band) */
  --c-turq-700: #1c8d86;
  --c-turq-500: #2bb6ad;
  --c-turq-300: #6fd6cc;

  /* Ivory (warm off-white text) */
  --c-ivory-100: #f1ecdd;

  /* ── 2. SEMANTIC ────────────────────────────────────────────────────── */

  /* Surfaces */
  --surface:           var(--c-cobalt-900);  /* page background (flat) */
  --surface-raised:    var(--c-cobalt-850);  /* bands / alt sections */
  --surface-sunken:    var(--c-cobalt-950);  /* deepest blocks */
  --surface-card:      var(--c-cobalt-600);  /* primary/feature card */
  --surface-card-alt:  var(--c-cobalt-700);  /* secondary block (CTA) */

  /* Text */
  --text:              var(--c-ivory-100);
  --text-muted:        rgba(241, 236, 221, 0.74);
  --text-on-gold:      #2a1d05;              /* text on gold buttons */

  /* Accent — warm (primary action, emphasis) */
  --accent:            var(--c-gold-500);
  --accent-strong:     var(--c-gold-300);    /* headline emphasis, numerals */
  --accent-deep:       var(--c-gold-700);

  /* Jewel — cool (links, icons, focus, decorative) */
  --jewel:             var(--c-turq-500);
  --jewel-strong:      var(--c-turq-300);
  --jewel-deep:        var(--c-turq-700);

  /* Borders / hairlines */
  --border:            rgba(205, 164, 78, 0.22);   /* gold hairline */
  --border-jewel:      rgba(111, 214, 204, 0.18);  /* turquoise hairline */

  /* Geometry (girih lattice stroke colors) */
  --pattern-line:      var(--c-gold-500);
  --pattern-node:      var(--c-turq-300);

  /* Status */
  --error:             #f0a8a8;

  /* ── MOTION ─────────────────────────────────────────────────────────── */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* ── SHAPE ──────────────────────────────────────────────────────────── */
  --radius-card:  18px;
  --radius-input: 12px;
  --radius-pill:  999px;  /* buttons */

  /* ── TYPE ───────────────────────────────────────────────────────────── */
  --font-sans: 'IBM Plex Sans Thai', sans-serif;  /* all text */
}

/* ----------------------------------------------------------------------------
   Tailwind v4 reference (for the future Next.js + shadcn app):
   map these into @theme, e.g.
     @theme {
       --color-surface: #0b1538;
       --color-accent:  #cda44e;
       --color-jewel:   #2bb6ad;
       ...
     }
   shadcn/ui: these primitives feed --background / --primary / --ring etc.
---------------------------------------------------------------------------- */