/* tebb — design tokens v0.1 (concept, for approval)
   Format: CSS custom properties, same file shape as docs/sales/mockups/assets/tokens.css.
   Themes via [data-theme] (the attribute Frappe Desk already uses) + prefers-* media queries.
   Contrast values measured (WCAG 2.x relative luminance) — see Design System doc. */

:root, [data-theme="light"] {
  /* Anabi scale — OKLCH, hue 11–14 */
  --anabi-50:  oklch(0.975 0.011 14);  /* #FEF4F4 */
  --anabi-100: oklch(0.945 0.024 13);  /* #FDE7E8 */
  --anabi-200: oklch(0.89 0.05 13);    /* #FACED1 */
  --anabi-300: oklch(0.815 0.095 12);  /* #F9A9B2 */
  --anabi-400: oklch(0.725 0.135 12);  /* #EE808F */
  --anabi-500: oklch(0.635 0.165 12);  /* #DB5870 */
  --anabi-600: oklch(0.54 0.172 12);   /* #BC3553 */
  --anabi-700: oklch(0.42 0.148 11);   /* #8B1939  ← Anabi (brand) */
  --anabi-800: oklch(0.36 0.125 11);   /* #6F142C */
  --anabi-900: oklch(0.295 0.098 11);  /* #520F20 */
  --anabi-950: oklch(0.225 0.07 11);   /* #350913 */

  /* Accent (semantic) */
  --accent:          var(--anabi-700);  /* text/icon tint · 9.0:1 on surface */
  --accent-fill:     var(--anabi-700);  /* filled controls · white label 9.2:1 */
  --accent-hover:    var(--anabi-800);
  --accent-pressed:  var(--anabi-900);
  --on-accent:       #FFFFFF;
  --accent-subtle:   var(--anabi-50);   /* tinted fill · accent text 8.5:1 */
  --accent-subtle-2: var(--anabi-100);
  --focus-ring:      var(--anabi-600);  /* 5.5:1 on surface · 3px + 2px offset */
  --tinted-bg:         var(--anabi-100);
  --tinted-bg-hover:   var(--anabi-200);
  --tinted-bg-pressed: var(--anabi-300);
  --nav-selected:      oklch(0.42 0.148 11 / 0.12);
  --fill-pressed:      oklch(0.55 0.01 40 / 0.24);

  /* Backgrounds (warm neutrals, hue 30–60) */
  --bg-canvas:   oklch(0.962 0.005 60);   /* #F5F2EF grouped background */
  --bg-surface:  oklch(0.995 0.0015 60);  /* #FEFDFC content surface */
  --bg-surface-2:oklch(0.978 0.003 60);   /* #F9F7F6 inset / table header */
  --bg-elevated: #FFFFFF;

  /* Labels */
  --label:   oklch(0.215 0.01 30);   /* #1E1817 · 17.3:1 */
  --label-2: oklch(0.45 0.01 40);    /* #5A5451 · 7.4:1 */
  --label-3: oklch(0.525 0.009 40);  /* #6F6966 · 5.3:1 surface / 4.8:1 canvas */
  --label-4: oklch(0.72 0.006 40);   /* #A8A3A2 · decorative/disabled only */

  /* Fills & separators */
  --fill-1: oklch(0.55 0.01 40 / 0.16);
  --fill-2: oklch(0.55 0.01 40 / 0.11);
  --fill-3: oklch(0.55 0.01 40 / 0.07);
  --separator: oklch(0.45 0.01 40 / 0.16);
  --separator-opaque: oklch(0.885 0.005 50); /* #DCD8D6 */

  /* Status — never Anabi; always icon + text */
  --red:   oklch(0.545 0.215 29);  --red-bg:   oklch(0.955 0.025 25);   /* #D0150F on #FFEAE8 · 4.8:1 */
  --green: oklch(0.51 0.132 150);  --green-bg: oklch(0.955 0.035 150);  /* #157A3A on #E0F7E4 · 4.8:1 */
  --amber: oklch(0.525 0.122 62);  --amber-bg: oklch(0.955 0.045 80);   /* #9B5700 on #FFEECF · 4.9:1 */
  --blue:  oklch(0.52 0.165 258);  --blue-bg:  oklch(0.955 0.025 255);  /* #2065C5 on #E5F1FF · 4.9:1 */
  --gray:  oklch(0.50 0.028 255);  --gray-bg:  oklch(0.94 0.008 255);   /* #596473 on #E8EBF1 · 5.0:1 */

  /* Glass (navigation/control layer only) */
  --glass-fill:      oklch(0.99 0.003 60 / 0.80);
  --glass-fill-tint: oklch(0.42 0.148 11 / 0.90);
  --glass-hairline:  oklch(0.215 0.01 30 / 0.10);
  --glass-specular:  oklch(1 0 0 / 0.75);
  --glass-blur:      blur(24px) saturate(180%);
  --label-on-glass:   var(--label);            /* 10.6:1 vs pure-black backdrop */
  --label-2-on-glass: oklch(0.42 0.01 40);     /* #524B49 · 5.1:1 vs pure-black backdrop */
  --shadow-glass: 0 1px 1px oklch(0.2 0.02 20 / 0.04), 0 4px 12px oklch(0.2 0.02 20 / 0.06), 0 16px 40px oklch(0.2 0.02 20 / 0.08);
  --shadow-card:  0 1px 2px oklch(0.2 0.02 20 / 0.05);
  --ambient: radial-gradient(1200px 800px at 100% -10%, oklch(0.725 0.135 12 / 0.16), transparent 60%),
             radial-gradient(1000px 700px at 0% 100%, oklch(0.86 0.06 60 / 0.35), transparent 60%);

  /* Charts */
  --series-1: var(--anabi-700); --series-2: var(--anabi-400); --series-3: oklch(0.72 0.012 50);

  /* Type — HIG styles mapped to rem (Latin); Arabic uses the -ar sizes */
  --font: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --t-large-title: 2.125rem; --t-title-1: 1.75rem; --t-title-2: 1.375rem; --t-title-3: 1.25rem;
  --t-headline: 1.0625rem; --t-body: 1rem; --t-callout: 0.9375rem; --t-subhead: 0.875rem;
  --t-footnote: 0.8125rem; --t-caption-1: 0.75rem; --t-caption-2: 0.6875rem;
  --lh-latin: 1.45; --lh-arabic: 1.65;

  /* Space (4/8), radius (concentric), targets, rows */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;
  --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 24px; --r-2xl: 28px; --r-capsule: 999px;
  --hit-touch: 44px; --hit-pointer: 32px;
  --row-h: 40px;

  /* Motion — spring-like curves, short durations */
  --ease-spring: linear(0, 0.036 2%, 0.14 5%, 0.3 8.6%, 0.5 13%, 0.68 18.4%, 0.8 23.8%, 0.9 31%, 0.955 38.6%, 0.985 48%, 0.997 60%, 1);
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-1: 120ms; --dur-2: 200ms; --dur-3: 280ms; --dur-4: 380ms;
}

[data-theme="dark"] {
  --accent: var(--anabi-400);              /* #EE808F · 6.9:1 on dark surface */
  --accent-fill: var(--anabi-600);         /* #BC3553 · white 5.6:1 */
  --accent-hover: oklch(0.565 0.175 12);
  --accent-pressed: var(--anabi-700);
  --accent-subtle: oklch(0.295 0.098 11 / 0.55);
  --accent-subtle-2: oklch(0.295 0.098 11 / 0.8);
  --focus-ring: var(--anabi-300);          /* 10.5:1 on canvas */
  --tinted-bg: oklch(0.295 0.098 11 / 0.8); --tinted-bg-hover: oklch(0.36 0.125 11 / 0.8); --tinted-bg-pressed: oklch(0.42 0.148 11 / 0.8);
  --nav-selected: oklch(0.725 0.135 12 / 0.18);
  --fill-pressed: oklch(0.75 0.01 50 / 0.3);
  --bg-canvas: oklch(0.158 0.006 30);      /* #0F0C0B */
  --bg-surface: oklch(0.205 0.007 30);     /* #1A1615 */
  --bg-surface-2: oklch(0.245 0.008 30);   /* #241F1E */
  --bg-elevated: oklch(0.27 0.008 30);     /* #2A2524 */
  --label: oklch(0.965 0.004 60);          /* #F5F3F1 */
  --label-2: oklch(0.785 0.007 50);        /* #BDB8B5 · 9.1:1 */
  --label-3: oklch(0.665 0.007 50);        /* #979290 · 5.9:1 */
  --label-4: oklch(0.48 0.006 50);
  --fill-1: oklch(0.75 0.01 50 / 0.2); --fill-2: oklch(0.75 0.01 50 / 0.14); --fill-3: oklch(0.75 0.01 50 / 0.09);
  --separator: oklch(0.85 0.01 50 / 0.14); --separator-opaque: oklch(0.32 0.007 30);
  --red: oklch(0.70 0.185 31);  --red-bg: oklch(0.29 0.07 27);
  --green: oklch(0.77 0.16 150); --green-bg: oklch(0.29 0.06 150);
  --amber: oklch(0.82 0.145 78); --amber-bg: oklch(0.30 0.06 75);
  --blue: oklch(0.74 0.13 254);  --blue-bg: oklch(0.29 0.06 255);
  --gray: oklch(0.74 0.025 255); --gray-bg: oklch(0.29 0.012 255);
  --glass-fill: oklch(0.22 0.008 30 / 0.82);
  --glass-fill-tint: oklch(0.54 0.172 12 / 0.92);
  --glass-hairline: oklch(1 0 0 / 0.10);
  --glass-specular: oklch(1 0 0 / 0.14);
  --label-2-on-glass: oklch(0.86 0.006 50); /* #D4D0CD · 6.4:1 vs pure-white backdrop */
  --shadow-glass: 0 1px 1px oklch(0 0 0 / 0.3), 0 8px 24px oklch(0 0 0 / 0.35), 0 24px 60px oklch(0 0 0 / 0.4);
  --shadow-card: 0 0 0 1px oklch(1 0 0 / 0.05);
  --ambient: radial-gradient(1200px 800px at 100% -10%, oklch(0.42 0.148 11 / 0.38), transparent 60%),
             radial-gradient(1000px 700px at 0% 100%, oklch(0.35 0.04 50 / 0.28), transparent 60%);
  --series-1: var(--anabi-400); --series-2: var(--anabi-600); --series-3: oklch(0.55 0.01 50);
}

[data-contrast="more"] { --accent: var(--anabi-800); --accent-fill: var(--anabi-800); --label-2: oklch(0.33 0.01 40); --label-3: oklch(0.40 0.01 40); --separator: oklch(0.45 0.01 40 / 0.5); --glass-fill: var(--bg-surface); --glass-blur: none; }
[data-theme="dark"][data-contrast="more"] { --accent: var(--anabi-300); --accent-fill: var(--anabi-700); --label-2: oklch(0.88 0.006 50); --label-3: oklch(0.8 0.006 50); --separator: oklch(0.85 0.01 50 / 0.45); }

/* Density (role default, user-overridable — flag F1) */
.density-comfy { --row-h: 48px; } .density-std { --row-h: 40px; } .density-compact { --row-h: 34px; } .density-dense { --row-h: 30px; }

/* Glass utilities + fallbacks */
.glass { background: var(--glass-fill); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
         border: 1px solid var(--glass-hairline); box-shadow: inset 0 1px 0 var(--glass-specular), var(--shadow-glass); }
.glass-tint { background: var(--glass-fill-tint); color: var(--on-accent); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass { background: var(--bg-elevated); } }
@media (prefers-reduced-transparency: reduce) { :root { --glass-fill: var(--bg-elevated); --glass-blur: none; } }
@media (prefers-contrast: more) { :root { --glass-fill: var(--bg-elevated); --glass-blur: none; --glass-hairline: var(--label-3); --separator: oklch(0.45 0.01 40 / 0.5); } }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; } }
@media (prefers-reduced-motion: reduce) { :root { --dur-1: 0ms; --dur-2: 120ms; --dur-3: 120ms; --dur-4: 150ms; --ease-spring: linear; } }