/* ASAN Invest - design tokens. See DESIGN.md for the rationale behind every value. */

:root {
  color-scheme: light;

  /* --- surface ramp (tinted toward brand hue 258, never warm) --- */
  --bg:            oklch(0.977 0.004 250);
  --surface:       oklch(1 0 0);
  --surface-2:     oklch(0.962 0.006 250);
  --surface-3:     oklch(0.935 0.008 250);
  --line:          oklch(0.905 0.008 250);
  --line-strong:   oklch(0.840 0.010 250);

  /* --- ink ramp. --ink-3 is the lightest value allowed to carry text (4.8:1). --- */
  --ink:           oklch(0.240 0.025 262);
  --ink-2:         oklch(0.440 0.020 262);
  --ink-3:         oklch(0.520 0.018 262);
  --ink-on-brand:  oklch(1 0 0);

  /* --- brand: primary action, selection, focus. Nothing decorative. --- */
  --brand:         oklch(0.440 0.145 258);
  --brand-hover:   oklch(0.375 0.142 258);
  --brand-active:  oklch(0.330 0.130 258);
  --brand-soft:    oklch(0.955 0.025 258);
  --brand-soft-2:  oklch(0.920 0.040 258);
  --brand-border:  oklch(0.860 0.055 258);
  --ring:          oklch(0.600 0.160 258);

  /* --- semantic state. Always paired with a text label in the UI. --- */
  --ok:            oklch(0.470 0.110 158);
  --ok-soft:       oklch(0.955 0.032 158);
  --ok-border:     oklch(0.880 0.060 158);

  --warn:          oklch(0.530 0.115 70);
  --warn-soft:     oklch(0.962 0.045 78);
  --warn-border:   oklch(0.890 0.070 78);

  --bad:           oklch(0.510 0.185 25);
  --bad-soft:      oklch(0.958 0.028 25);
  --bad-border:    oklch(0.890 0.050 25);

  /* --- type --- */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;

  --t-2xs: 0.75rem;    /* 12 */
  --t-xs:  0.8125rem;  /* 13 */
  --t-sm:  0.875rem;   /* 14 */
  --t-base:0.9375rem;  /* 15 */
  --t-md:  1.0625rem;  /* 17 */
  --t-lg:  1.1875rem;  /* 19 */
  --t-xl:  1.4375rem;  /* 23 */
  --t-2xl: 1.75rem;    /* 28 */
  --t-3xl: 2.125rem;   /* 34 */
  --t-4xl: 2.75rem;    /* 44 */

  /* --- space --- */
  --s-1: 2px;  --s-2: 4px;  --s-3: 6px;  --s-4: 8px;
  --s-5: 12px; --s-6: 16px; --s-7: 20px; --s-8: 24px;
  --s-9: 32px; --s-10: 40px; --s-11: 56px; --s-12: 80px;

  /* --- shape: buttons/inputs 8, cards/panels 12, pills full. Documented rule, no exceptions. --- */
  --r-control: 8px;
  --r-panel: 12px;
  --r-pill: 999px;

  /* --- elevation: tinted toward brand hue, never pure black --- */
  --shadow-1: 0 1px 2px oklch(0.30 0.04 258 / 0.06);
  --shadow-2: 0 4px 12px -2px oklch(0.30 0.04 258 / 0.10), 0 2px 4px -2px oklch(0.30 0.04 258 / 0.06);
  --shadow-3: 0 16px 40px -8px oklch(0.28 0.05 258 / 0.18), 0 4px 10px -4px oklch(0.28 0.05 258 / 0.10);

  /* --- semantic z-scale. No arbitrary values anywhere in app.css. --- */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-backdrop: 300;
  --z-modal: 400;
  --z-toast: 500;
  --z-tooltip: 600;

  /* --- motion --- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --fast: 150ms;
  --mid: 220ms;

  /* --- brand ornament. Generated in brand.js and injected here at boot so both CSS and SVG
         draw the same şəbəkə geometry from one source. --- */
  --shebeke: none;
  --shebeke-strip: none;

  /* --- layout --- */
  --rail-w: 248px;
  --rail-w-collapsed: 64px;
  --topbar-h: 64px;
  --content-max: 1280px;
  --band-max: 1360px;
  --prose: 68ch;
}

[data-theme="dark"] {
  color-scheme: dark;

  --bg:            oklch(0.185 0.014 262);
  --surface:       oklch(0.228 0.015 262);
  --surface-2:     oklch(0.262 0.016 262);
  --surface-3:     oklch(0.300 0.017 262);
  --line:          oklch(0.320 0.018 262);
  --line-strong:   oklch(0.400 0.020 262);

  --ink:           oklch(0.965 0.005 262);
  --ink-2:         oklch(0.780 0.012 262);
  --ink-3:         oklch(0.665 0.014 262);
  --ink-on-brand:  oklch(0.170 0.020 262);

  --brand:         oklch(0.720 0.125 258);
  --brand-hover:   oklch(0.780 0.115 258);
  --brand-active:  oklch(0.820 0.100 258);
  --brand-soft:    oklch(0.300 0.045 258);
  --brand-soft-2:  oklch(0.360 0.060 258);
  --brand-border:  oklch(0.420 0.070 258);
  --ring:          oklch(0.740 0.130 258);

  --ok:            oklch(0.760 0.130 158);
  --ok-soft:       oklch(0.300 0.045 158);
  --ok-border:     oklch(0.400 0.060 158);

  --warn:          oklch(0.810 0.130 78);
  --warn-soft:     oklch(0.320 0.050 70);
  --warn-border:   oklch(0.430 0.070 70);

  --bad:           oklch(0.740 0.150 25);
  --bad-soft:      oklch(0.320 0.060 25);
  --bad-border:    oklch(0.430 0.090 25);

  --shadow-1: 0 1px 2px oklch(0 0 0 / 0.30);
  --shadow-2: 0 4px 12px -2px oklch(0 0 0 / 0.42), 0 2px 4px -2px oklch(0 0 0 / 0.30);
  --shadow-3: 0 16px 40px -8px oklch(0 0 0 / 0.55), 0 4px 10px -4px oklch(0 0 0 / 0.35);
}