/* ============================================================
   TADWERA DESIGN SYSTEM — tokens.css
   Layer 1: Design Tokens — Single Source of Truth
   Format: HSL channels (Tailwind CSS 4 compatible)
   Usage: hsl(var(--token-name))
          hsl(var(--token-name) / 0.5)  ← opacity support
   ============================================================ */

/* ── Google Fonts ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ============================================================
   PRIMITIVE TOKENS — Radix Colors Methodology
   Light  → Slate-based  (cool, structured)
   Dark   → Gray-based   (neutral, focused)
   X-Dark → Gray dense   (near-black surfaces)
   ============================================================ */

/* ── Light Theme ──────────────────────────────────────────── */
[data-theme="light"] {
  --scale-100:  210 17% 98%;
  --scale-200:  210 16% 96%;
  --scale-300:  210 14% 93%;
  --scale-400:  210 14% 89%;
  --scale-500:  210 12% 83%;
  --scale-600:  210 10% 70%;
  --scale-700:  210 9%  56%;
  --scale-800:  210 10% 42%;
  --scale-900:  210 11% 29%;
  --scale-1000: 210 12% 20%;
  --scale-1100: 210 13% 13%;
  --scale-1200: 210 14% 7%;
}

/* ── Dark Theme ───────────────────────────────────────────── */
[data-theme="dark"] {
  --scale-100:  0 0% 9%;
  --scale-200:  0 0% 11%;
  --scale-300:  0 0% 14%;
  --scale-400:  0 0% 18%;
  --scale-500:  0 0% 24%;
  --scale-600:  0 0% 35%;
  --scale-700:  0 0% 50%;
  --scale-800:  0 0% 63%;
  --scale-900:  0 0% 75%;
  --scale-1000: 0 0% 85%;
  --scale-1100: 0 0% 93%;
  --scale-1200: 0 0% 97%;
}

/* ── Extra Dark Theme ─────────────────────────────────────── */
[data-theme="extra-dark"] {
  --scale-100:  0 0% 4%;
  --scale-200:  0 0% 6%;
  --scale-300:  0 0% 8%;
  --scale-400:  0 0% 11%;
  --scale-500:  0 0% 16%;
  --scale-600:  0 0% 27%;
  --scale-700:  0 0% 42%;
  --scale-800:  0 0% 57%;
  --scale-900:  0 0% 70%;
  --scale-1000: 0 0% 82%;
  --scale-1100: 0 0% 91%;
  --scale-1200: 0 0% 97%;
}

/* ============================================================
   SEMANTIC TOKENS — Built on Primitives
   Rule: No component ever touches a Primitive directly
   ============================================================ */

/* ── Light: Semantic ──────────────────────────────────────── */
[data-theme="light"] {

  /* Text */
  --foreground:           var(--scale-1200);
  --foreground-light:     var(--scale-1100);
  --foreground-lighter:   var(--scale-900);
  --foreground-muted:     var(--scale-700);
  --foreground-contrast:  0 0% 100%;

  /* Backgrounds — Surface Hierarchy (lightest → deepest) */
  --bg-200:               var(--scale-200);
  --bg:                   var(--scale-300);
  --bg-alternative-200:   var(--scale-100);
  --bg-alternative:       var(--scale-200);
  --bg-selection:         158 79% 90%;
  --bg-control:           0 0% 100%;
  --bg-surface-75:        0 0% 100%;
  --bg-surface-100:       0 0% 100%;
  --bg-surface-200:       var(--scale-100);
  --bg-surface-300:       var(--scale-200);
  --bg-surface-400:       var(--scale-300);
  --bg-overlay:           210 14% 7%;
  --bg-overlay-hover:     var(--scale-200);
  --bg-muted:             var(--scale-200);
  --bg-button:            0 0% 100%;
  --bg-dialog:            0 0% 100%;
  --bg-dash-sidebar:      var(--scale-100);
  --bg-dash-canvas:       var(--scale-200);

  /* Borders — Density Hierarchy (lightest → strongest) */
  --border-muted:         var(--scale-300);
  --border:               var(--scale-400);
  --border-secondary:     var(--scale-500);
  --border-overlay:       var(--scale-500);
  --border-control:       var(--scale-400);
  --border-alternative:   var(--scale-400);
  --border-strong:        var(--scale-700);
  --border-stronger:      var(--scale-900);
  --border-button:        var(--scale-400);
  --border-button-hover:  var(--scale-600);

  /* Brand — Supabase Green */
  --brand-200:            158 60% 92%;
  --brand-300:            158 65% 82%;
  --brand-400:            158 72% 68%;
  --brand-500:            158 76% 57%;
  --brand-600:            158 79% 43%;
  --brand:                158 79% 51%;
  --brand-link:           158 79% 38%;

  /* State — Destructive */
  --destructive-200:      0 86% 95%;
  --destructive-300:      0 86% 90%;
  --destructive-400:      0 86% 80%;
  --destructive-500:      0 86% 65%;
  --destructive-600:      0 86% 45%;
  --destructive:          0 86% 55%;

  /* State — Warning */
  --warning-200:          38 92% 95%;
  --warning-300:          38 92% 88%;
  --warning-400:          38 92% 75%;
  --warning-500:          38 92% 60%;
  --warning-600:          38 92% 40%;
  --warning:              38 92% 50%;

  /* State — Success (alias for brand in light) */
  --success:              158 79% 41%;

  /* Code Blocks */
  --code-block-1:         var(--scale-100);
  --code-block-2:         var(--scale-200);
  --code-block-3:         158 79% 44%;
  --code-block-4:         217 91% 60%;
  --code-block-5:         38 92% 55%;

  /* Secondary */
  --secondary-200:        var(--scale-200);
  --secondary-400:        var(--scale-400);
  --secondary:            var(--scale-600);
}

/* ── Dark: Semantic ───────────────────────────────────────── */
[data-theme="dark"] {

  /* Text */
  --foreground:           var(--scale-1200);
  --foreground-light:     var(--scale-1100);
  --foreground-lighter:   var(--scale-900);
  --foreground-muted:     var(--scale-700);
  --foreground-contrast:  0 0% 100%;

  /* Backgrounds */
  --bg-200:               var(--scale-200);
  --bg:                   var(--scale-100);
  --bg-alternative-200:   0 0% 7%;
  --bg-alternative:       0 0% 8%;
  --bg-selection:         158 79% 20%;
  --bg-control:           var(--scale-300);
  --bg-surface-75:        var(--scale-200);
  --bg-surface-100:       var(--scale-200);
  --bg-surface-200:       var(--scale-300);
  --bg-surface-300:       var(--scale-400);
  --bg-surface-400:       var(--scale-500);
  --bg-overlay:           0 0% 0%;
  --bg-overlay-hover:     var(--scale-300);
  --bg-muted:             var(--scale-300);
  --bg-button:            var(--scale-300);
  --bg-dialog:            var(--scale-200);
  --bg-dash-sidebar:      0 0% 7%;
  --bg-dash-canvas:       var(--scale-100);

  /* Borders */
  --border-muted:         var(--scale-300);
  --border:               var(--scale-400);
  --border-secondary:     var(--scale-400);
  --border-overlay:       var(--scale-500);
  --border-control:       var(--scale-400);
  --border-alternative:   var(--scale-300);
  --border-strong:        var(--scale-600);
  --border-stronger:      var(--scale-800);
  --border-button:        var(--scale-400);
  --border-button-hover:  var(--scale-600);

  /* Brand */
  --brand-200:            158 40% 18%;
  --brand-300:            158 50% 25%;
  --brand-400:            158 60% 35%;
  --brand-500:            158 70% 44%;
  --brand-600:            158 79% 55%;
  --brand:                158 79% 51%;
  --brand-link:           158 79% 62%;

  /* Destructive */
  --destructive-200:      0 50% 16%;
  --destructive-300:      0 55% 22%;
  --destructive-400:      0 60% 32%;
  --destructive-500:      0 68% 46%;
  --destructive-600:      0 76% 58%;
  --destructive:          0 72% 51%;

  /* Warning */
  --warning-200:          38 50% 16%;
  --warning-300:          38 55% 22%;
  --warning-400:          38 62% 33%;
  --warning-500:          38 72% 46%;
  --warning-600:          38 82% 58%;
  --warning:              38 78% 52%;

  /* Success */
  --success:              158 79% 51%;

  /* Code Blocks */
  --code-block-1:         var(--scale-200);
  --code-block-2:         var(--scale-300);
  --code-block-3:         158 79% 51%;
  --code-block-4:         217 91% 65%;
  --code-block-5:         38 92% 60%;

  /* Secondary */
  --secondary-200:        var(--scale-300);
  --secondary-400:        var(--scale-500);
  --secondary:            var(--scale-700);
}

/* ── Extra Dark: Semantic ─────────────────────────────────── */
[data-theme="extra-dark"] {

  /* Text */
  --foreground:           var(--scale-1200);
  --foreground-light:     var(--scale-1100);
  --foreground-lighter:   var(--scale-900);
  --foreground-muted:     var(--scale-700);
  --foreground-contrast:  0 0% 100%;

  /* Backgrounds */
  --bg-200:               var(--scale-200);
  --bg:                   var(--scale-100);
  --bg-alternative-200:   0 0% 2%;
  --bg-alternative:       0 0% 3%;
  --bg-selection:         158 79% 14%;
  --bg-control:           var(--scale-300);
  --bg-surface-75:        var(--scale-200);
  --bg-surface-100:       var(--scale-200);
  --bg-surface-200:       var(--scale-300);
  --bg-surface-300:       var(--scale-400);
  --bg-surface-400:       var(--scale-500);
  --bg-overlay:           0 0% 0%;
  --bg-overlay-hover:     var(--scale-300);
  --bg-muted:             var(--scale-200);
  --bg-button:            var(--scale-300);
  --bg-dialog:            var(--scale-200);
  --bg-dash-sidebar:      0 0% 3%;
  --bg-dash-canvas:       var(--scale-100);

  /* Borders */
  --border-muted:         var(--scale-200);
  --border:               var(--scale-300);
  --border-secondary:     var(--scale-400);
  --border-overlay:       var(--scale-400);
  --border-control:       var(--scale-300);
  --border-alternative:   var(--scale-200);
  --border-strong:        var(--scale-500);
  --border-stronger:      var(--scale-700);
  --border-button:        var(--scale-300);
  --border-button-hover:  var(--scale-500);

  /* Brand */
  --brand-200:            158 35% 12%;
  --brand-300:            158 45% 18%;
  --brand-400:            158 55% 28%;
  --brand-500:            158 65% 38%;
  --brand-600:            158 75% 50%;
  --brand:                158 79% 51%;
  --brand-link:           158 79% 62%;

  /* Destructive */
  --destructive-200:      0 45% 10%;
  --destructive-300:      0 50% 16%;
  --destructive-400:      0 55% 26%;
  --destructive-500:      0 65% 40%;
  --destructive-600:      0 72% 54%;
  --destructive:          0 70% 48%;

  /* Warning */
  --warning-200:          38 45% 10%;
  --warning-300:          38 50% 16%;
  --warning-400:          38 58% 27%;
  --warning-500:          38 68% 40%;
  --warning-600:          38 78% 54%;
  --warning:              38 75% 48%;

  /* Success */
  --success:              158 79% 51%;

  /* Code Blocks */
  --code-block-1:         var(--scale-100);
  --code-block-2:         var(--scale-200);
  --code-block-3:         158 79% 51%;
  --code-block-4:         217 91% 65%;
  --code-block-5:         38 92% 60%;

  /* Secondary */
  --secondary-200:        var(--scale-200);
  --secondary-400:        var(--scale-400);
  --secondary:            var(--scale-600);
}

/* ============================================================
   COMPONENT TOKENS — Built on Semantic Tokens only
   Rule: Semantic tokens → Component tokens → Styles
   ============================================================ */

:root {
  /* Button */
  --btn-primary-bg:           var(--brand);
  --btn-primary-bg-hover:     var(--brand-600);
  --btn-primary-text:         0 0% 100%;
  --btn-primary-border:       var(--brand);

  --btn-secondary-bg:         var(--bg-button);
  --btn-secondary-bg-hover:   var(--bg-surface-200);
  --btn-secondary-text:       var(--foreground);
  --btn-secondary-border:     var(--border-button);
  --btn-secondary-border-hover: var(--border-button-hover);

  --btn-ghost-bg:             transparent;
  --btn-ghost-bg-hover:       var(--bg-surface-200);
  --btn-ghost-text:           var(--foreground-light);
  --btn-ghost-border:         transparent;

  --btn-destructive-bg:       var(--destructive);
  --btn-destructive-bg-hover: var(--destructive-600);
  --btn-destructive-text:     0 0% 100%;
  --btn-destructive-border:   var(--destructive);

  --btn-outline-bg:           transparent;
  --btn-outline-bg-hover:     var(--bg-surface-100);
  --btn-outline-text:         var(--foreground);
  --btn-outline-border:       var(--border-button);

  /* Input */
  --input-bg:                 var(--bg-control);
  --input-border:             var(--border-control);
  --input-text:               var(--foreground);
  --input-placeholder:        var(--foreground-muted);
  --input-focus-ring:         var(--brand);
  --input-focus-border:       var(--brand);
  --input-disabled-bg:        var(--bg-surface-200);
  --input-disabled-text:      var(--foreground-muted);

  /* Card */
  --card-bg:                  var(--bg-surface-100);
  --card-border:              var(--border);
  --card-shadow:              var(--shadow-sm);

  /* Badge */
  --badge-default-bg:         var(--bg-surface-200);
  --badge-default-text:       var(--foreground-light);
  --badge-brand-bg:           var(--brand-200);
  --badge-brand-text:         var(--brand-600);
  --badge-destructive-bg:     var(--destructive-200);
  --badge-destructive-text:   var(--destructive-600);
  --badge-warning-bg:         var(--warning-200);
  --badge-warning-text:       var(--warning-600);

  /* Table */
  --table-header-bg:          var(--bg-surface-200);
  --table-row-bg:             var(--bg-surface-100);
  --table-row-hover-bg:       var(--bg-surface-200);
  --table-border:             var(--border-muted);

  /* Tabs */
  --tab-active-text:          var(--foreground);
  --tab-active-border:        var(--brand);
  --tab-inactive-text:        var(--foreground-muted);

  /* Focus Ring — global */
  --focus-ring:               var(--brand);
  --focus-ring-offset:        var(--bg);
}