/* tokens.css — Optic360 Design Tokens
   All design decisions in one place.
   Load after reset.css, before optic360.css
*/

:root {
  /* ── FONT SIZES ────────────────────────────── */
  --fs-xs:    10px;   /* labels, badges, meta items */
  --fs-sm:    11px;   /* body text, table rows, buttons */
  --fs-base:  12px;   /* field values in detail tabs */
  --fs-title: 13px;   /* document titles, modal titles */
  --fs-h1:    15px;   /* module titles (Sales orders) */
  --fs-value: 16px;   /* order value, invoice total */
  --fs-kpi:   20px;   /* KPI numbers on dashboard */

  /* ── FONT WEIGHTS ──────────────────────────── */
  --fw-normal:  400;
  --fw-medium:  500;
  --fw-semi:    600;

  /* ── SPACING ───────────────────────────────── */
  --space-page:    18px;  /* page content padding */
  --space-section: 16px;  /* section top padding */
  --space-card:    12px;  /* card internal padding */
  --space-field:   10px;  /* field grid gap */
  --space-inline:  6px;   /* inline element gap */
  --space-tight:   4px;   /* tight spacing */

  /* ── HEIGHTS ───────────────────────────────── */
  --h-topbar:   50px;
  --h-subbar:   36px;  /* horizontal nav sub bar */
  --h-statustab:34px;
  --h-toolbar:  38px;
  --h-pagination:34px;
  --h-row:      34px;  /* table row */
  --h-thead:    26px;  /* table header row */
  --h-input:    24px;
  --h-btn:      22px;
  --h-btn-p:    26px;  /* primary button */
  --h-btn-h:    24px;  /* module header button */

  /* ── WIDTHS ────────────────────────────────── */
  --w-sidebar:  200px;
  --w-sidebar-col: 48px;  /* collapsed sidebar */
  --w-search:   200px;
  --w-detail-side: 200px; /* right sidebar on detail screens */
  --w-footer-lbl: 130px;  /* footer row label column */
  --w-totals:   240px;    /* totals block on invoices */

  /* ── BORDER RADIUS ─────────────────────────── */
  --r-sm:  4px;
  --r-md:  5px;
  --r-lg:  6px;
  --r-xl:  7px;
  --r-xxl: 8px;

  /* ── BORDERS ───────────────────────────────── */
  --border-width: 0.5px;

  /* ── AVATAR SIZES ──────────────────────────── */
  --av-sm:  22px;
  --av-md:  24px;
  --av-lg:  28px;
  --av-xl:  32px;
  --av-xxl: 48px;

  /* ── ICON SIZES ────────────────────────────── */
  --icon-sm:  11px;
  --icon-md:  13px;
  --icon-lg:  14px;
  --icon-xl:  16px;

  /* ── TRANSITIONS ───────────────────────────── */
  --transition-fast:   0.15s ease;
  --transition-normal: 0.2s ease;
  --transition-slow:   0.25s ease;

  /* ── SHADOWS ───────────────────────────────── */
  --shadow-sm:  0 1px 4px rgba(0,0,0,.08);
  --shadow-md:  0 4px 16px rgba(0,0,0,.1);
  --shadow-lg:  0 8px 32px rgba(0,0,0,.15);

  /* ── COLOURS — LIGHT THEME ─────────────────── */
  color-scheme: light;   /* tells iOS/Safari the page is light — stops it auto-darkening native controls when the device is in dark mode */
  --bg-page:    #f2f2f7;   /* page background */
  --bg-surface: #ffffff;   /* card/panel background */
  --border:     #e4e4ec;   /* all borders */
  --tp:         #1a1a2e;   /* primary text — black */
  --ts:         #66667a;   /* secondary text — grey */
  --tt:         #555568;   /* tertiary text — mid grey */
  --th:         #f8f8fc;   /* table header background */

  /* Accent — purple */
  --ac:   #534AB7;
  --acl:  #EEEDFE;
  --ac-h: #453e99;  /* hover state */

  /* Success — green */
  --up:   #0F6E56;
  --upl:  #E1F5EE;

  /* Danger — red */
  --dn:   #993C1D;
  --dnl:  #FAECE7;

  /* Warning — amber */
  --am:   #854F0B;
  --aml:  #FAEEDA;

  /* Blue — for call badges, confirmed status */
  --bl:   #185FA5;
  --bll:  #E6F1FB;
}

/* ── DARK THEME ─────────────────────────────── */
.dk {
  color-scheme: dark;   /* match native controls to the dark theme */
  --bg-page:    #0f0f14;
  --bg-surface: #16161e;
  --border:     #252530;
  --tp:         #e8e8f5;
  --ts:         #8888a0;
  --tt:         #555568;
  --th:         #131320;

  --ac:   #7F77DD;
  --acl:  #26215C;
  --ac-h: #9990e8;

  --up:   #5DCAA5;
  --upl:  #085041;

  --dn:   #F0997B;
  --dnl:  #4A1B0C;

  --am:   #EF9F27;
  --aml:  #412402;

  --bl:   #5BA3E8;
  --bll:  #0E2D4A;
}

/* ── GOOGLE FONTS ───────────────────────────── */
/* Add to base.html <head>:
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
*/