/* ==========================================================================
   nqrah design — Design Tokens v0.2
   Built on the nqrah design language «إطار ومؤشر» (Frame and Cursor), from
   github.com/MahmoudAtteyya/naqra: docs/design/nqrah-design-language.md and
   packages/ui/src/styles/nqrah.css. The interior-design studio adds one layer
   on top: the architect's drawing vocabulary (dimension lines, section marks,
   plates) and a palette of sampled *materials* used only for content.
   Read docs/DESIGN-SYSTEM.md before changing anything here.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Alexandria:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Readex+Pro:wght@300;400;500;600&display=swap");

:root {
  /* ---- nqrah brand (exact; never altered) ----------------------------- */
  --nq-orange: #FF603C;   /* the logo orange: one action per screen, ≤ 8% of area */
  --nq-plum:   #261E2D;   /* ink and the one inverse band per page               */
  --nq-white:  #FFFFFF;

  /* ---- Roles: light (paper) — values from nqrah www/console ----------- */
  --canvas:      #FAF6FB;
  --surface:     #FEFDFF;
  --surface-2:   #F4EFF5;
  --surface-3:   #ECE7EE;
  --ink:         #261E2D;
  --ink-2:       #585359;
  --ink-3:       #706B71;
  --line:        #281D2B1A;
  --line-strong: #281D2B2E;
  --brand:        var(--nq-orange);
  --brand-strong: #FF7453;
  --brand-soft:   #FFE9E2;
  --brand-ink:    #AF2E0C;   /* orange as text, ≥ 4.5:1 */
  --on-brand:     #261E2D;   /* text on orange is always plum (5.3:1) */
  --band:         #261E2D;   /* inverse band */
  --band-ink:     #F6F0F8;
  --band-muted:   #CBC1D0;
  --band-line:    #FFFFFF26;
  --focus-ring:   var(--brand-ink);

  /* Status — kept away from the orange (nqrah.css) */
  --danger:  oklch(0.56 0.2 12);   --danger-soft:  oklch(0.96 0.025 12);  --danger-ink:  oklch(0.5 0.19 12);
  --warning: oklch(0.78 0.14 85);  --warning-soft: oklch(0.97 0.04 90);   --warning-ink: oklch(0.5 0.11 80);
  --success: oklch(0.62 0.12 165); --success-soft: oklch(0.96 0.03 165);  --success-ink: oklch(0.45 0.1 165);
  --info:    oklch(0.58 0.1 245);  --info-soft:    oklch(0.96 0.02 245);  --info-ink:    oklch(0.47 0.12 245);

  /* ---- Studio layer: the drawing vocabulary --------------------------- */
  --measure:      var(--brand);      /* dimension LINES take the logo orange */
  --measure-ink:  var(--brand-ink);  /* dimension NUMBERS take orange-as-text */
  --light:        var(--warning);    /* LED / light layer and camera cones   */
  --sheet:        #FFFFFF;           /* white drawing paper under plans       */

  /* ---- Studio layer: materials (CONTENT ONLY — samples, legends, maps) -- */
  --mat-plaster:    #F3EFE8;
  --mat-travertine: #E8E1D5;
  --mat-marble:     #ECEAE6;
  --mat-walnut:     #6B4A33;
  --mat-oak:        #B08D67;
  --mat-brass:      #A88446;
  --mat-graphite:   #2F2D2B;
  --mat-sage:       #6D7B66;
  --mat-eucalyptus: #6F9894;
  --mat-clay:       #A76A57;
  --mat-glass:      #BFD7DE;

  /* ---- Type (nqrah): Alexandria headings, Readex Pro text, JB Mono numbers */
  --ff-display: "Alexandria", "Readex Pro", system-ui, sans-serif;
  --ff-body:    "Readex Pro", "Alexandria", system-ui, sans-serif;
  --ff-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --heading-weight: 650;

  --t-micro: 0.6875rem;  /* 11 */
  --t-small: 0.8125rem;  /* 13 */
  --t-body:  0.9375rem;  /* 15 */
  --t-lead:  1.125rem;   /* 18 */
  --t-h3:    1.375rem;   /* 22 */
  --t-h2:    clamp(1.6rem, 1.2rem + 1.6vw, 2.1rem);
  --t-h1:    clamp(2.2rem, 1.4rem + 3.4vw, 3.6rem);
  --t-mega:  clamp(2.6rem, 1.3rem + 5.6vw, 5.4rem);
  --lh-body: 1.85;       /* nqrah body leading */
  --lh-head: 1.45;       /* Arabic headings need room for dots and marks */

  /* ---- Shape (nqrah): crisper than usual UI --------------------------- */
  --r-field: 6px;        /* fields and buttons */
  --r-panel: 10px;       /* panels */
  --r-frame: 0;          /* the frame is square */
  --frame-arm: 9px;
  --frame-weight: 2px;
  --hair: 1px;
  --stroke-icon: 1.5;    /* nqrah icon grid: 24px, 1.5 stroke, square ends */
  --float: 0 18px 40px -22px rgba(38, 30, 45, 0.32);  /* only for floating layers */

  /* ---- Space ---------------------------------------------------------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --gutter: clamp(16px, 4vw, 40px);
  --container: 1240px;

  /* ---- Motion (nqrah 120–220ms, never a bounce) + one camera curve ------ */
  --dur-1: 120ms; --dur-2: 170ms; --dur-3: 220ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --dur-camera: 900ms;                               /* 3D only */
  --ease-camera: cubic-bezier(0.65, 0, 0.35, 1);    /* a dolly on rails */

  color-scheme: light;
}

/* ---- Dark: plum night (nqrah — DEFAULT THEME across all surfaces) ------- */
:root:not([data-theme="light"]),
:root[data-theme="dark"] {
  --canvas: #16101A; --surface: #1C1521; --surface-2: #231A28; --surface-3: #2A2030;
  --ink: #EAE6EE; --ink-2: #B9B0C0; --ink-3: #AFA4B6;
  --line: #FFFFFF1C; --line-strong: #FFFFFF36;
  --brand-soft: #472119; --brand-ink: #FF947A;
  --band: #231A28;
  --band-ink: #F6F0F8;
  --band-muted: #CBC1D0;
  --band-line: #FFFFFF26;
  --danger: oklch(0.68 0.17 12); --danger-soft: oklch(0.28 0.06 12); --danger-ink: oklch(0.8 0.12 12);
  --warning-soft: oklch(0.3 0.05 85); --warning-ink: oklch(0.86 0.12 85);
  --success-soft: oklch(0.28 0.045 165); --success-ink: oklch(0.82 0.11 165);
  --info-soft: oklch(0.28 0.045 245); --info-ink: oklch(0.8 0.09 245);
  --sheet: #1F1824;
  --float: 0 18px 40px -18px rgba(0, 0, 0, 0.7);
  color-scheme: dark;
}
:root[data-theme="light"] {
  --canvas: #FAF6FB; --surface: #FEFDFF; --surface-2: #F4EFF5; --surface-3: #ECE7EE;
  --ink: #261E2D; --ink-2: #585359; --ink-3: #706B71;
  --line: #281D2B1A; --line-strong: #281D2B2E;
  --brand-soft: #FFE9E2; --brand-ink: #AF2E0C;
  --band: #261E2D; --band-ink: #F6F0F8; --band-muted: #CBC1D0; --band-line: #FFFFFF26;
  --sheet: #FFFFFF;
  --float: 0 18px 40px -22px rgba(38, 30, 45, 0.32);
  color-scheme: light;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; --dur-camera: 0ms; }
}


/* ---- Enterprise Portal Semantic Aliases (mapped 1:1 to nqrah tokens) ---- */
:root, :root[data-theme="dark"], :root[data-theme="light"] {
  --bg-canvas: var(--canvas);
  --bg-surface: var(--surface);
  --bg-elevated: var(--surface-2);
  --bg-glass: var(--surface);
  --fg-primary: var(--ink);
  --fg-secondary: var(--ink-2);
  --border-subtle: var(--line);
  --border-strong: var(--line-strong);
  --accent-gold: var(--brand);
  --accent-gold-hover: var(--brand-strong);
  --accent-brass: var(--mat-brass);
  --state-verified: var(--success);
  --state-error: var(--danger);
  --font-sans: var(--ff-body);
  --font-display: var(--ff-display);
  --font-mono: var(--ff-mono);
  --space-1: var(--s-1);
  --space-2: var(--s-2);
  --space-3: var(--s-3);
  --space-4: var(--s-4);
  --space-5: var(--s-5);
  --space-6: var(--s-6);
  --space-8: var(--s-7);
  --space-10: var(--s-8);
  --space-12: var(--s-9);
  --radius-sm: var(--r-field);
  --radius-md: var(--r-field);
  --radius-lg: var(--r-panel);
  --radius-pill: 999px;
  --text-xs: var(--t-micro);
  --text-sm: var(--t-small);
  --text-base: var(--t-body);
  --text-lg: var(--t-lead);
  --text-xl: var(--t-h3);
  --text-2xl: var(--t-h2);
  --shadow-lg: var(--float);
  --dur-fast: var(--dur-1);
  --ease-out: var(--ease-standard);
}