/* =====================================================================
   DESIGN TOKENS — the ONLY place where colours, fonts and sizes live.
   To redesign the product, change values here (or add a new theme block).
   App code and components.css must use var(--...) only, never raw hex.
   Themes: default (light), [data-theme="dark"], [data-theme="ocean"] (example rebrand).
   ===================================================================== */

:root {
  /* ---- Brand / neutrals ---- */
  --color-bg: #F4F5F7;              /* page background */
  --color-surface: #FFFFFF;         /* cards, panels */
  --color-surface-sunken: #F0F2F5;  /* active nav item, table header, inputs bg */
  --color-surface-muted: #E9ECF1;   /* quiet blocks (cold list teaser) */
  --color-border: #E3E6EB;
  --color-border-strong: #D5D9E0;
  --color-divider: #EEF0F3;

  --color-text: #12151C;            /* main text */
  --color-text-soft: #3E4A5C;       /* secondary text */
  --color-text-muted: #5A6474;      /* captions, meta (4.5:1 on white) */
  --color-text-on-primary: #FFFFFF;

  --color-primary: #12151C;         /* primary buttons, active states */
  --color-primary-hover: #2A2F3A;
  --color-link: #12151C;
  --color-link-hover: #C2381D;
  --color-focus: #2563EB;           /* focus ring — keep high contrast */

  /* ---- Heat (meaning colours — keep the meaning in every theme) ---- */
  --heat-hot: #C2381D;
  --heat-hot-bg: #FBDAD2;
  --heat-hot-text: #9A2A12;
  --heat-warm: #D98A00;
  --heat-warm-bg: #FCE7B8;
  --heat-warm-text: #7A4A00;
  --heat-cooled: #8592A6;
  --heat-cooled-bg: #E6EAF0;
  --heat-cooled-text: #3E4A5C;
  --heat-none: #DDE1E7;             /* not opened */
  --heat-track: #EEF0F3;            /* heat bar background */

  /* ---- Status (import rows, banners) ---- */
  --status-ok: #1E7F4F;
  --status-ok-bg: #DDF3E6;
  --status-ok-text: #145C38;
  --status-fixed: var(--heat-warm);
  --status-fixed-bg: var(--heat-warm-bg);
  --status-fixed-text: var(--heat-warm-text);
  --status-error: #B42318;
  --status-error-bg: #FDE3E1;
  --status-error-text: #8A1A12;
  --status-info-bg: #E7F0FD;
  --status-info-text: #1D4ED8;

  /* ---- Dark panel (alert preview, bot chat) ---- */
  --color-panel-dark: #12151C;
  --color-panel-dark-raised: #232833;
  --color-panel-dark-text: #D5DAE2;
  --color-panel-dark-muted: #A9B2C0;

  /* ---- Platform admin (your own console — must never look like a customer screen) ---- */
  --color-admin: #3B2F8F;
  --color-admin-bg: #ECEAFB;
  --color-admin-text: #2E2470;
  --color-text-on-admin: #FFFFFF;

  /* ---- Print / paper (same in every theme: paper is always white) ---- */
  --color-paper: #FFFFFF;
  --color-paper-text: #12151C;
  --color-paper-line: #E9ECF1;
  --color-focus-tint: rgba(37, 99, 235, 0.08);

  /* ---- Typography ---- */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-arabic: "IBM Plex Sans Arabic", "Inter", system-ui, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, monospace;

  --text-xs: 11px;
  --text-sm: 12px;
  --text-md: 13px;
  --text-base: 14px;
  --text-lg: 16px;
  --text-xl: 20px;
  --text-2xl: 28px;
  --text-3xl: 30px;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --leading-tight: 1.15;
  --leading-normal: 1.45;
  --tracking-tight: -0.02em;

  /* ---- Spacing (4 px grid) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* ---- Shape ---- */
  --radius-xs: 3px;    /* heat-grid tiles */
  --radius-sm: 8px;
  --radius-md: 12px;   /* buttons, inputs */
  --radius-lg: 16px;   /* cards */
  --radius-xl: 24px;   /* dark panels, phone frame */
  --radius-pill: 999px;
  --border-width: 1px;

  /* ---- Sizes ---- */
  --control-h: 48px;      /* main touch buttons */
  --control-h-md: 44px;   /* desktop buttons, inputs */
  --control-h-sm: 36px;   /* chips-as-buttons, filters */
  --sidebar-w: 240px;
  --content-max: 1100px;
  --tile: 14px;           /* heat-grid tile */

  /* ---- Elevation ---- */
  --shadow-sm: 0 1px 2px rgba(18, 21, 28, 0.06);
  --shadow-overlay: 0 12px 32px rgba(18, 21, 28, 0.18);

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --duration: 160ms;
}

/* ---------------------------------------------------------------------
   DARK THEME
   --------------------------------------------------------------------- */
[data-theme="dark"] {
  --color-bg: #0E1116;
  --color-surface: #171B22;
  --color-surface-sunken: #1E232C;
  --color-surface-muted: #1E232C;
  --color-border: #2A303A;
  --color-border-strong: #3A414D;
  --color-divider: #232833;

  --color-text: #ECEFF4;
  --color-text-soft: #C3CAD6;
  --color-text-muted: #A3ACBA;
  --color-text-on-primary: #12151C;

  --color-primary: #ECEFF4;
  --color-primary-hover: #FFFFFF;
  --color-link: #ECEFF4;
  --color-link-hover: #FF8A6B;
  --color-focus: #7AA7FF;

  --heat-hot: #F0643F;
  --heat-hot-bg: #3A1B14;
  --heat-hot-text: #FFB4A1;
  --heat-warm: #E9A23B;
  --heat-warm-bg: #3A2A0E;
  --heat-warm-text: #FFD58A;
  --heat-cooled: #8592A6;
  --heat-cooled-bg: #252B35;
  --heat-cooled-text: #C3CAD6;
  --heat-none: #2E3440;
  --heat-track: #232833;

  --status-ok: #3FBF7F;
  --status-ok-bg: #12301F;
  --status-ok-text: #8FE3B5;
  --status-error: #F06A5D;
  --status-error-bg: #3A1614;
  --status-error-text: #FFB0A8;
  --status-info-bg: #16233D;
  --status-info-text: #9DBBFF;

  --color-panel-dark: #05070A;
  --color-panel-dark-raised: #1E232C;

  --color-admin: #A79BFF;
  --color-admin-bg: #241F45;
  --color-admin-text: #D6D0FF;
  --color-text-on-admin: #12151C;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-overlay: 0 12px 32px rgba(0, 0, 0, 0.5);
}

/* ---------------------------------------------------------------------
   "OCEAN" — example of a full rebrand done ONLY with tokens.
   Brand colours, font and corners change; heat meaning stays.
   --------------------------------------------------------------------- */
[data-theme="ocean"] {
  --color-bg: #F2F6F6;
  --color-surface: #FFFFFF;
  --color-surface-sunken: #E6EFEF;
  --color-surface-muted: #E1ECEC;
  --color-border: #D6E2E3;
  --color-border-strong: #BFD0D2;
  --color-divider: #E6EEEF;

  --color-text: #0B2A2E;
  --color-text-soft: #2C4A4E;
  --color-text-muted: #4C6468;

  --color-primary: #0F5C63;
  --color-primary-hover: #0B474D;
  --color-link: #0F5C63;
  --color-link-hover: #C2381D;

  --font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  --color-panel-dark: #0B2A2E;
  --color-panel-dark-raised: #16404A;
}