/* =============================================================================
 * tokens.css — ConnectX-OCS admin console design tokens
 * -----------------------------------------------------------------------------
 * TWO-AXIS token system driven by CSS custom properties:
 *   axis 1 — data-brand : "tahwol" (default) | "stc"
 *   axis 2 — data-theme : "light"  (default) | "dark"
 *
 * Both attributes live on <html> (documentElement) and are set BEFORE any
 * stylesheet loads by the inline pre-paint script in index.html, so flipping a
 * single attribute recolours the entire UI with no flash of wrong theme.
 *
 * LAYERS (authored top-to-bottom, each references the one above it):
 *   1. Raw primitives      — brand-neutral scales: spacing, radii, type,
 *                            shadows, z-index, neutral colour ramp.
 *   2. Semantic / contract — the tokens the rest of the CSS consumes
 *                            (--color-bg, --color-accent, ...). Defined per
 *                            brand (light base) with a dark override block.
 *   3. Derived helpers     — values composed from the contract tokens.
 *   4. Override seam        — an intentionally-empty hook for downstream
 *                            (task #100513 shell / deployment) overrides.
 *
 * Downstream code MUST consume the semantic/derived tokens, never the raw
 * primitives or hard-coded hex.
 * ========================================================================== */

/* -----------------------------------------------------------------------------
 * LAYER 1 — RAW PRIMITIVES (brand- and theme-neutral)
 * -------------------------------------------------------------------------- */
:root {
  /* Type ------------------------------------------------------------------- */
  --font-sans: "Inter", "Inter var", system-ui, -apple-system, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  --font-size-xs: 0.75rem;   /* 12px */
  --font-size-sm: 0.8125rem; /* 13px */
  --font-size-md: 0.875rem;  /* 14px — base UI text */
  --font-size-lg: 1rem;      /* 16px */
  --font-size-xl: 1.25rem;   /* 20px */
  --font-size-2xl: 1.5rem;   /* 24px */
  --font-size-3xl: 2rem;     /* 32px */

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

  --line-height-tight: 1.25;
  --line-height-normal: 1.5;

  /* Spacing scale (4px base) ---------------------------------------------- */
  --space-0: 0;
  --space-1: 0.25rem; /* 4  */
  --space-2: 0.5rem;  /* 8  */
  --space-3: 0.75rem; /* 12 */
  --space-4: 1rem;    /* 16 */
  --space-5: 1.5rem;  /* 24 */
  --space-6: 2rem;    /* 32 */
  --space-7: 3rem;    /* 48 */
  --space-8: 4rem;    /* 64 */

  /* Radii ------------------------------------------------------------------ */
  --radius-xs: 3px;
  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* Border widths ---------------------------------------------------------- */
  --border-width: 1px;
  --border-width-strong: 2px;

  /* Neutral ramp (used to compose light/dark contract tokens) -------------- */
  --gray-0: #ffffff;
  --gray-50: #f7f8fa;
  --gray-100: #eef0f4;
  --gray-200: #e2e6ec;
  --gray-300: #cbd2dc;
  --gray-400: #9aa4b2;
  --gray-500: #6b7688;
  --gray-600: #4c5567;
  --gray-700: #343c4c;
  --gray-800: #222836;
  --gray-900: #151a24;
  --gray-950: #0c0f16;

  /* Fixed status hues (tuned per theme in layer 2 where needed) ------------ */
  --hue-success: #16a34a;
  --hue-success-dark: #22c55e;
  --hue-warning: #d97706;
  --hue-warning-dark: #f59e0b;
  --hue-danger: #dc2626;
  --hue-danger-dark: #f87171;
  --hue-info: #0284c7;
  --hue-info-dark: #38bdf8;

  /* Elevation (shadows) — light-optimised; dark overrides in layer 2 ------- */
  --shadow-1: 0 1px 2px rgba(15, 23, 42, 0.06),
    0 1px 3px rgba(15, 23, 42, 0.10);
  --shadow-2: 0 4px 12px rgba(15, 23, 42, 0.10),
    0 2px 4px rgba(15, 23, 42, 0.06);
  --shadow-3: 0 12px 32px rgba(15, 23, 42, 0.18),
    0 4px 8px rgba(15, 23, 42, 0.08);

  /* Z-index scale ---------------------------------------------------------- */
  --z-base: 1;
  --z-sticky: 100;
  --z-navbar: 200;
  --z-sidebar: 300;
  --z-dropdown: 800;
  --z-modal-backdrop: 900;
  --z-modal: 1000;
  --z-toast: 1100;

  /* Motion ----------------------------------------------------------------- */
  --transition-fast: 120ms ease;
  --transition-base: 180ms ease;

  /* Fixed geometry consumed by the app shell ------------------------------- */
  --sidebar-width: 248px;
  --sidebar-width-collapsed: 64px;
  --navbar-height: 56px;
  --content-max-width: 1440px;
}

/* -----------------------------------------------------------------------------
 * LAYER 2 — SEMANTIC / CONTRACT TOKENS (per brand × theme)
 * -----------------------------------------------------------------------------
 * For each brand we define the LIGHT palette as the base (so a missing
 * data-theme still renders correctly) and a [data-theme="dark"] override block.
 * -------------------------------------------------------------------------- */

/* ===== BRAND: tahwol — PRODUCT DEFAULT — teal on navy ====================== */
:root[data-brand="tahwol"] {
  /* Brand accents */
  --brand-accent: #14b8a6;         /* teal */
  --brand-accent-strong: #0f766e;  /* deep teal */
  --brand-accent-soft: #99f6e4;
  --brand-chrome: #0b1738;         /* navy — sidebar / navbar chrome */
  --brand-chrome-2: #0f1e46;
  --brand-chrome-text: #e6ecff;
  --brand-chrome-muted: #93a2c9;
  --brand-chrome-border: #1c2c5a;

  /* Surfaces & text (light) */
  --color-bg: var(--gray-50);
  --color-surface: var(--gray-0);
  --color-surface-2: var(--gray-100);
  --color-surface-hover: var(--gray-100);
  --color-border: var(--gray-200);
  --color-border-strong: var(--gray-300);
  --color-text: var(--gray-900);
  --color-heading: var(--gray-950);
  --color-muted: var(--gray-500);
  --color-disabled: var(--gray-400);

  /* Accent contract */
  --color-accent: var(--brand-accent);
  --color-accent-strong: var(--brand-accent-strong);
  --color-accent-soft: var(--brand-accent-soft);
  --color-accent-contrast: #ffffff;
  --color-link: var(--brand-accent-strong);
  --color-focus-ring: rgba(20, 184, 166, 0.45);

  /* Chrome contract (sidebar + navbar) */
  --color-chrome: var(--brand-chrome);
  --color-chrome-2: var(--brand-chrome-2);
  --color-chrome-text: var(--brand-chrome-text);
  --color-chrome-muted: var(--brand-chrome-muted);
  --color-chrome-border: var(--brand-chrome-border);
  --color-chrome-active: var(--brand-accent);
  --color-chrome-active-bg: rgba(20, 184, 166, 0.16);

  /* Status (light) */
  --color-success: var(--hue-success);
  --color-warning: var(--hue-warning);
  --color-danger: var(--hue-danger);
  --color-info: var(--hue-info);
  --color-success-bg: #dcfce7;
  --color-warning-bg: #fef3c7;
  --color-danger-bg: #fee2e2;
  --color-info-bg: #e0f2fe;
}

:root[data-brand="tahwol"][data-theme="dark"] {
  --color-bg: var(--gray-950);
  --color-surface: var(--gray-900);
  --color-surface-2: var(--gray-800);
  --color-surface-hover: var(--gray-800);
  --color-border: #232c40;
  --color-border-strong: #313c54;
  --color-text: #e7ecf5;
  --color-heading: #f4f7fc;
  --color-muted: #93a0b5;
  --color-disabled: var(--gray-600);

  --color-accent: #2dd4bf;
  --color-accent-strong: #14b8a6;
  --color-accent-soft: #134e4a;
  --color-accent-contrast: #04211d;
  --color-link: #5eead4;
  --color-focus-ring: rgba(45, 212, 191, 0.5);

  /* In dark mode the chrome blends with the surrounding surfaces */
  --color-chrome: #081130;
  --color-chrome-2: #0b1738;
  --color-chrome-text: #e6ecff;
  --color-chrome-muted: #7f8fb8;
  --color-chrome-border: #16244c;
  --color-chrome-active: #2dd4bf;
  --color-chrome-active-bg: rgba(45, 212, 191, 0.18);

  --color-success: var(--hue-success-dark);
  --color-warning: var(--hue-warning-dark);
  --color-danger: var(--hue-danger-dark);
  --color-info: var(--hue-info-dark);
  --color-success-bg: rgba(34, 197, 94, 0.16);
  --color-warning-bg: rgba(245, 158, 11, 0.16);
  --color-danger-bg: rgba(248, 113, 113, 0.16);
  --color-info-bg: rgba(56, 189, 248, 0.16);

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.55);
  --shadow-3: 0 12px 32px rgba(0, 0, 0, 0.65);
}

/* ===== BRAND: stc — provisional palette — violet on deep indigo =========== */
:root[data-brand="stc"] {
  /* Brand accents (STC signature purple) */
  --brand-accent: #6d28d9;
  --brand-accent-strong: #4c1d95;
  --brand-accent-soft: #ddd6fe;
  --brand-chrome: #2b0a52;         /* deep purple chrome */
  --brand-chrome-2: #380f68;
  --brand-chrome-text: #f2ecff;
  --brand-chrome-muted: #b9a6dd;
  --brand-chrome-border: #43196f;

  --color-bg: var(--gray-50);
  --color-surface: var(--gray-0);
  --color-surface-2: var(--gray-100);
  --color-surface-hover: var(--gray-100);
  --color-border: var(--gray-200);
  --color-border-strong: var(--gray-300);
  --color-text: var(--gray-900);
  --color-heading: var(--gray-950);
  --color-muted: var(--gray-500);
  --color-disabled: var(--gray-400);

  --color-accent: var(--brand-accent);
  --color-accent-strong: var(--brand-accent-strong);
  --color-accent-soft: var(--brand-accent-soft);
  --color-accent-contrast: #ffffff;
  --color-link: var(--brand-accent);
  --color-focus-ring: rgba(109, 40, 217, 0.4);

  --color-chrome: var(--brand-chrome);
  --color-chrome-2: var(--brand-chrome-2);
  --color-chrome-text: var(--brand-chrome-text);
  --color-chrome-muted: var(--brand-chrome-muted);
  --color-chrome-border: var(--brand-chrome-border);
  --color-chrome-active: #a78bfa;
  --color-chrome-active-bg: rgba(167, 139, 250, 0.16);

  --color-success: var(--hue-success);
  --color-warning: var(--hue-warning);
  --color-danger: var(--hue-danger);
  --color-info: var(--hue-info);
  --color-success-bg: #dcfce7;
  --color-warning-bg: #fef3c7;
  --color-danger-bg: #fee2e2;
  --color-info-bg: #e0f2fe;
}

:root[data-brand="stc"][data-theme="dark"] {
  --color-bg: var(--gray-950);
  --color-surface: var(--gray-900);
  --color-surface-2: var(--gray-800);
  --color-surface-hover: var(--gray-800);
  --color-border: #2a2340;
  --color-border-strong: #3a3054;
  --color-text: #ece7f5;
  --color-heading: #f6f4fc;
  --color-muted: #a99fbf;
  --color-disabled: var(--gray-600);

  --color-accent: #a78bfa;
  --color-accent-strong: #8b5cf6;
  --color-accent-soft: #2e1065;
  --color-accent-contrast: #140524;
  --color-link: #c4b5fd;
  --color-focus-ring: rgba(167, 139, 250, 0.5);

  --color-chrome: #1a0736;
  --color-chrome-2: #250b4a;
  --color-chrome-text: #f2ecff;
  --color-chrome-muted: #9c8bc0;
  --color-chrome-border: #331155;
  --color-chrome-active: #a78bfa;
  --color-chrome-active-bg: rgba(167, 139, 250, 0.2);

  --color-success: var(--hue-success-dark);
  --color-warning: var(--hue-warning-dark);
  --color-danger: var(--hue-danger-dark);
  --color-info: var(--hue-info-dark);
  --color-success-bg: rgba(34, 197, 94, 0.16);
  --color-warning-bg: rgba(245, 158, 11, 0.16);
  --color-danger-bg: rgba(248, 113, 113, 0.16);
  --color-info-bg: rgba(56, 189, 248, 0.16);

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.55);
  --shadow-3: 0 12px 32px rgba(0, 0, 0, 0.65);
}

/* -----------------------------------------------------------------------------
 * LAYER 3 — DERIVED HELPERS (composed from the contract tokens above)
 * -------------------------------------------------------------------------- */
:root {
  /* Focus outline used app-wide */
  --focus-outline: 0 0 0 3px var(--color-focus-ring);

  /* Component contract tokens — resolve to semantic tokens so a downstream
   * override of --color-* cascades into every component automatically. */
  --control-bg: var(--color-surface);
  --control-border: var(--color-border-strong);
  --control-radius: var(--radius-md);
  --control-height: 2.25rem;
  --control-padding-x: var(--space-3);
  --control-text: var(--color-text);
  --control-placeholder: var(--color-muted);

  --card-bg: var(--color-surface);
  --card-border: var(--color-border);
  --card-radius: var(--radius-lg);
  --card-shadow: var(--shadow-1);

  --table-header-bg: var(--color-surface-2);
  --table-row-hover: var(--color-surface-hover);
  --table-border: var(--color-border);

  --modal-bg: var(--color-surface);
  --modal-backdrop: rgba(3, 7, 18, 0.55);
  --modal-radius: var(--radius-lg);
  --modal-shadow: var(--shadow-3);

  --toast-bg: var(--color-surface);
  --toast-shadow: var(--shadow-2);
  --toast-radius: var(--radius-md);
}

/* -----------------------------------------------------------------------------
 * LAYER 4 — OVERRIDE SEAM
 * -----------------------------------------------------------------------------
 * Intentional, empty extension point. Later subtasks or per-deployment theming
 * can redefine any contract token here (or via a higher-specificity selector /
 * a class on <html>) WITHOUT editing the layers above. Keep it last so it wins
 * the cascade at equal specificity.
 * -------------------------------------------------------------------------- */
:root {
  /* e.g. --color-accent: #0ea5e9;  (left empty by design) */
}