/* ==========================================================================
   xNawa brand tokens
   --------------------------------------------------------------------------
   Layer 1  primitives   raw brand colours, never referenced by components
   Layer 2  semantic     what a colour means; components use only these
   Layer 3  app bridge   maps semantics onto the token names already used by
                         public/assets/xnawa.css and xnawa-phase2.css

   Contrast, measured (WCAG 2.1, normal text needs 4.5:1):
     ink      on paper    16.25  AAA      teal-800 on paper    7.75  AAA
     slate    on paper     5.43  AA       teal-700 on paper    4.98  AA
     paper    on navy     16.82  AAA      amber    on navy     7.09  AAA
     teal-500 on navy      5.81  AA

   Two colours FAIL as text on light backgrounds and are graphic-only there:
     teal-500 pulse  2.90     amber  2.37
   Both are text-safe on navy. Never set either as body copy on paper/canvas.
   ========================================================================== */

:root {
  /* ---- Layer 1: primitives ---------------------------------------------- */
  --xn-teal-900: #04474b;
  --xn-teal-800: #065c61;  /* deep   - AAA text on light */
  --xn-teal-700: #0b7c82;  /* core   - primary brand teal */
  --xn-teal-600: #0e9296;
  --xn-teal-500: #12a9a6;  /* pulse  - graphic only on light */
  --xn-teal-200: #b9d5d7;
  --xn-teal-100: #d8e6e7;
  --xn-teal-50:  #eef5f5;

  --xn-navy-900: #0a1726;
  --xn-navy-800: #0e1e31;  /* navy   - primary dark surface */
  --xn-navy-700: #1b3049;
  --xn-navy-600: #27415c;
  --xn-navy-500: #3a5875;

  --xn-amber-700: #9a5c14;
  --xn-amber-600: #c97a22;  /* text-safe amber on light */
  --xn-amber-500: #e8963c;  /* nucleus  - graphic only on light */
  --xn-amber-100: #fbebd8;

  --xn-ink:       #16212f;
  --xn-slate-600: #5c6b7f;
  --xn-slate-400: #93a1b1;
  --xn-slate-300: #c9d2db;
  --xn-line:      #dbe1e7;
  --xn-canvas:    #f3f5f7;
  --xn-paper:     #ffffff;

  --xn-success: #19744a;
  --xn-danger:  #b42318;
  --xn-warning: #b45309;

  /* ---- Layer 2: semantics (light) --------------------------------------- */
  --color-canvas:        var(--xn-canvas);
  --color-surface:       var(--xn-paper);
  --color-surface-sunk:  var(--xn-teal-50);
  --color-border:        var(--xn-line);
  --color-border-strong: var(--xn-slate-300);

  --color-text:          var(--xn-ink);
  --color-text-muted:    var(--xn-slate-600);
  --color-text-invert:   var(--xn-paper);

  --color-primary:       var(--xn-teal-700);
  --color-primary-hover: var(--xn-teal-800);
  --color-primary-quiet: var(--xn-teal-50);
  --color-on-primary:    var(--xn-paper);
  --color-link:          var(--xn-teal-800);

  --color-accent:        var(--xn-amber-500);   /* graphic only */
  --color-accent-text:   var(--xn-amber-600);   /* use when it must be text */
  --color-focus:         var(--xn-amber-500);

  --color-nav-bg:        var(--xn-navy-800);
  --color-nav-bg-soft:   var(--xn-navy-700);
  --color-nav-text:      #c8d3de;
  --color-nav-text-on:   var(--xn-paper);
  --color-nav-marker:    var(--xn-teal-500);

  --color-success: var(--xn-success);
  --color-danger:  var(--xn-danger);
  --color-warning: var(--xn-warning);

  /* ---- Shape, elevation, motion ----------------------------------------- */
  --xn-radius-sm: 6px;
  --xn-radius:    8px;
  --xn-radius-lg: 14px;
  --xn-radius-pill: 999px;

  --xn-shadow-sm: 0 1px 2px rgba(14, 30, 49, .06);
  --xn-shadow:    0 8px 24px rgba(14, 30, 49, .07);
  --xn-shadow-lg: 0 18px 44px rgba(14, 30, 49, .14);

  --xn-transition: 140ms cubic-bezier(.2, .8, .2, 1);

  /* ---- Type ------------------------------------------------------------- */
  --xn-font-sans: "Inter", "Segoe UI Variable", "Segoe UI", Tahoma, Arial, sans-serif;
  --xn-font-arabic: "Cairo", "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --xn-font-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;

  --xn-tracking-eyebrow: .09em;
}

/* Arabic is the platform default; give RTL the Arabic stack automatically. */
[dir="rtl"] {
  --xn-font-sans: var(--xn-font-arabic);
}

/* ==========================================================================
   Dark theme
   On navy, teal-700 drops to 3.38:1, so the primary shifts up to teal-500
   (5.81:1) and links use the same. Amber stays fully text-safe at 7.09:1.
   ========================================================================== */
:root[data-theme="dark"] {
  --color-canvas:        var(--xn-navy-900);
  --color-surface:       var(--xn-navy-800);
  --color-surface-sunk:  #0c1a2b;
  --color-border:        var(--xn-navy-600);
  --color-border-strong: var(--xn-navy-500);

  --color-text:          #e8eef4;
  --color-text-muted:    #9fb3c2;
  --color-text-invert:   var(--xn-navy-900);

  --color-primary:       var(--xn-teal-500);
  --color-primary-hover: var(--xn-teal-600);
  --color-primary-quiet: rgba(18, 169, 166, .14);
  --color-on-primary:    var(--xn-navy-900);
  --color-link:          var(--xn-teal-500);

  --color-accent:        var(--xn-amber-500);
  --color-accent-text:   var(--xn-amber-500);
  --color-focus:         var(--xn-amber-500);

  --color-nav-bg:        #081320;
  --color-nav-bg-soft:   var(--xn-navy-700);

  --color-success: #4fb98a;
  --color-danger:  #f4776a;
  --color-warning: #e8963c;

  --xn-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --xn-shadow:    0 8px 24px rgba(0, 0, 0, .45);
  --xn-shadow-lg: 0 18px 44px rgba(0, 0, 0, .55);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-canvas:        var(--xn-navy-900);
    --color-surface:       var(--xn-navy-800);
    --color-surface-sunk:  #0c1a2b;
    --color-border:        var(--xn-navy-600);
    --color-border-strong: var(--xn-navy-500);
    --color-text:          #e8eef4;
    --color-text-muted:    #9fb3c2;
    --color-text-invert:   var(--xn-navy-900);
    --color-primary:       var(--xn-teal-500);
    --color-primary-hover: var(--xn-teal-600);
    --color-primary-quiet: rgba(18, 169, 166, .14);
    --color-on-primary:    var(--xn-navy-900);
    --color-link:          var(--xn-teal-500);
    --color-accent-text:   var(--xn-amber-500);
    --color-nav-bg:        #081320;
    --color-nav-bg-soft:   var(--xn-navy-700);
    --color-success: #4fb98a;
    --color-danger:  #f4776a;
    --color-warning: #e8963c;
  }
}

/* ==========================================================================
   Layer 3: bridge to the token names the app already ships.
   Including this file after xnawa.css re-skins the existing UI with no
   component edits; every legacy variable keeps its original meaning.
   ========================================================================== */
:root {
  --ink:         var(--color-text);
  --muted:       var(--color-text-muted);
  --line:        var(--color-border);
  --paper:       var(--color-surface);
  --canvas:      var(--color-canvas);
  --nav:         var(--color-nav-bg);
  --nav-soft:    var(--color-nav-bg-soft);
  --accent:      var(--color-primary);
  --accent-dark: var(--color-primary-hover);
  --focus:       var(--color-focus);
  --success:     var(--color-success);
  --danger:      var(--color-danger);
  --radius:      var(--xn-radius);
  --shadow:      var(--xn-shadow);
  --transition:  var(--xn-transition);
}

/* Brand pattern as a background utility (tiles at its natural 160px). */
.xn-pattern {
  background-color: var(--color-canvas);
  background-image: url("../pattern/xnawa-pattern-core.svg");
  background-repeat: repeat;
  background-size: 160px 160px;
}

:root[data-theme="dark"] .xn-pattern {
  background-image: url("../pattern/xnawa-pattern-core-dark.svg");
}