/* ============================================================
   Design tokens — Clean retail light (light default + dark)
   One accent (indigo), semantic status colors, 4px spacing,
   tabular figures for money, calm elevation scale.
   ============================================================ */
:root {
  /* Surfaces & text (light) */
  --bg:          #eef0f4;
  --surface:     #ffffff;
  --surface-2:   #f7f8fa;
  --surface-3:   #eef1f5;
  --border:      #e0e4ea;
  --border-strong: #cdd3dc;
  --text:        #121826;
  --text-2:      #4a5567;
  --text-3:      #8a93a3;

  /* Accent (indigo) */
  --accent:        #4f46e5;
  --accent-hover:  #4338ca;
  --accent-active: #3730a3;
  --accent-weak:   #eef2ff;
  --accent-border: #c7ccf7;
  --on-accent:     #ffffff;

  /* Status */
  --success:      #067647;  --success-weak: #e9fbf0;  --on-success: #ffffff;
  --warn:         #b54708;  --warn-weak:    #fff6e8;
  --danger:       #d92d20;  --danger-hover: #b42318;  --danger-weak: #fef2f1;  --on-danger: #ffffff;
  --info:         #175cd3;  --info-weak:    #eff6ff;

  /* Money emphasis */
  --money:        #05663c;

  /* Elevation */
  --shadow-1: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08);
  --shadow-2: 0 4px 8px -2px rgba(16,24,40,.10), 0 2px 4px -2px rgba(16,24,40,.06);
  --shadow-3: 0 12px 24px -6px rgba(16,24,40,.16), 0 4px 8px -4px rgba(16,24,40,.08);
  --shadow-pop: 0 24px 48px -12px rgba(16,24,40,.28);

  /* Radius */
  --r-xs: 5px; --r-sm: 8px; --r: 11px; --r-lg: 15px; --r-xl: 20px; --r-full: 999px;

  /* Spacing (4px base) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px;
  --s7: 32px; --s8: 40px; --s9: 56px;

  /* Type — the trailing families cover Arabic (ar) and Tifinagh (Tamazight)
     from the OS so those scripts render without shipping a webfont. */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    "Noto Sans Arabic", "Geeza Pro", Tahoma, "Noto Sans Tifinagh", "Tifinagh", sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Menlo, Consolas,
    "Noto Sans Arabic", "Noto Sans Tifinagh", monospace;
  --fs-xs: 12px; --fs-sm: 13px; --fs-base: 15px; --fs-md: 16px;
  --fs-lg: 18px; --fs-xl: 22px; --fs-2xl: 28px; --fs-3xl: 36px; --fs-4xl: 46px;
  --lh: 1.5;

  /* Motion */
  --dur-fast: 120ms; --dur: 200ms; --dur-slow: 320ms;
  --ease: cubic-bezier(.2, .6, .3, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  /* Layout — app shell.
     Navigation lives in a persistent rail so it can never be clipped by the
     status bar; the rail collapses to icons, then to a bottom bar. */
  --rail-w: 236px;         /* full rail: icon + label */
  --rail-w-collapsed: 76px;/* icon-only rail */
  --topbar-h: 60px;        /* status bar (no navigation) */
  --bottombar-h: 64px;     /* mobile bottom nav */
  --tap: 48px;             /* minimum touch target */
  --nav-h: var(--topbar-h);/* back-compat for older rules */
  --z-nav: 40; --z-sticky: 30; --z-modal: 100; --z-toast: 200;

  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg:          #0b0f18;
  --surface:     #151a25;
  --surface-2:   #1b2130;
  --surface-3:   #232b3b;
  --border:      #2a3346;
  --border-strong: #3a465e;
  --text:        #f2f5fa;
  --text-2:      #a6b0c1;
  --text-3:      #6e7a8f;

  --accent:        #7d78ff;
  --accent-hover:  #918dff;
  --accent-active: #a5a1ff;
  --accent-weak:   #211f3a;
  --accent-border: #3b3866;
  --on-accent:     #0b0f18;

  --success: #34d399; --success-weak: #10251c; --on-success: #06231a;
  --warn:    #fbbf47; --warn-weak:    #2a2010;
  --danger:  #f97066; --danger-hover: #fb8b82; --danger-weak: #2a1513; --on-danger: #2a0d0a;
  --info:    #5b9dff; --info-weak:    #101d33;
  --money:   #4ade80;

  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 4px 10px rgba(0,0,0,.45);
  --shadow-3: 0 14px 28px rgba(0,0,0,.55);
  --shadow-pop: 0 24px 52px rgba(0,0,0,.65);

  color-scheme: dark;
}