/* ==========================================================================
   THAHEEN OPERATOR CONSOLE — DESIGN TOKENS
   Two tiers, as the Portal's tokens.css: PRIMITIVES named by pigment, never referenced by a
   component; SEMANTIC named by purpose, the only tier components touch. Values are Preline's admin
   dashboard, measured on the live pages (index-preview.html, users-add-user.html), Aug 2026.
   No component may name a colour, size or radius that is not here.
   ========================================================================== */
:root {
  /* ── TIER 1 · PRIMITIVES ───────────────────────────────────────────────── */
  --gray-50: #f9fafb;  --gray-100: #f3f4f6; --gray-200: #E2E8E5; --gray-300: #d1d5dc;
  --gray-400: #99a1af; --gray-500: #6a7282; --gray-600: #4a5565; --gray-700: #364153;
  --gray-800: #1C2523; --gray-900: #101828;
  --gray-canvas: #F5F7F6;        /* the reference's --bg — the page ground, distinct from --gray-50   */
  --gray-surface-2: #FAFBFA;     /* the reference's --surface-2 — a raised panel a shade off white    */
  --gray-border-strong: #CBD5D0; /* the reference's --line-strong                                     */
  --gray-muted: #65756F;         /* the reference's --muted                                           */
  --gray-faint: #8CA09A;         /* the reference's --faint                                           */
  --blue-50: #eff6ff;  --blue-100: #dbeafe; --blue-200: #bedbff; --blue-400: #50a2ff;
  --blue-600: #155dfc; --blue-700: #1447e6;
  --green-50: #E3F2E9; --green-200: #BFE2CD; --green-600: #00a63e; --green-700: #177245;
  --red-50: #FBEAE8;   --red-200: #ffc9c9;   --red-500: #fb2c36;   --red-600: #e7000b;   --red-700: #c10007;
  --red-ghost: #B42318;          /* the reference's --danger — ghost text, not the danger badge fill  */
  --amber-50: #FBF1D8; --amber-200: #EDD9A3; --amber-600: #e17100; --amber-700: #8F6400;
  --purple-600: #9810fa; --teal-400: #00d5be; --white: #ffffff;

  /* ── TIER 2 · SEMANTIC ─────────────────────────────────────────────────── */
  /* surfaces */
  --color-canvas: var(--gray-canvas);        /* the page ground behind cards                      */
  --color-surface: var(--white);             /* cards, sidebar, topbar, menus, inputs             */
  --color-surface-sunken: var(--gray-100);   /* active nav row, mini tiles, table search, chips   */
  --color-surface-raised: var(--gray-surface-2); /* the table head, a shade off white              */
  --color-surface-hover: var(--gray-50);     /* row and button hover                              */
  --color-border: var(--gray-200);           /* every hairline: cards, dividers, inputs (1px)     */
  --color-border-strong: var(--gray-border-strong); /* checkboxes, selects, hovered inputs        */
  --color-border-focus: var(--blue-700);
  /* text */
  --color-text-heading: var(--gray-800);
  --color-text-body: var(--gray-800);
  --color-text-secondary: var(--gray-600);
  --color-text-muted: var(--gray-muted);     /* labels, descriptions, icon buttons — 4.8:1        */
  --color-text-placeholder: var(--gray-faint);
  --color-text-disabled: var(--gray-400);
  --color-text-inverse: var(--white);
  --color-text-link: var(--blue-600);
  /* actions */
  --color-action-primary: var(--blue-600);
  --color-action-primary-hover: var(--blue-700);
  --color-action-primary-on: var(--white);
  --color-action-primary-subtle: var(--blue-50);
  --color-action-secondary: var(--white);
  --color-action-secondary-hover: var(--gray-50);
  --color-action-secondary-on: var(--gray-800);
  /* accent — the reference's brand blue, distinct from --color-action-primary's own blue-600/700 */
  --color-accent: var(--blue-600);
  --color-accent-ink: var(--blue-700);       /* hover/pressed accent text                         */
  --color-accent-soft: rgba(21, 93, 252, 0.08);
  --color-accent-softer: rgba(21, 93, 252, 0.05);
  --color-cross: rgba(21, 93, 252, 0.06);    /* the hovered row/column's crossing highlight        */
  --color-cross-strong: rgba(21, 93, 252, 0.13); /* where the hover intersects the sorted column   */
  /* status — never the only signal; pair with a glyph or a word */
  --color-success: var(--green-600);  --color-success-bg: var(--green-50);  --color-success-on: var(--green-700);
  --color-success-line: var(--green-200);    /* the pill's own border — carries the tone even where
                                                 the tint is too pale to                            */
  --color-warning: var(--amber-600);  --color-warning-bg: var(--amber-50);  --color-warning-on: var(--amber-700);
  --color-warning-line: var(--amber-200);
  --color-danger: var(--red-600);     --color-danger-bg: var(--red-50);     --color-danger-on: var(--red-700);
  --color-danger-line: var(--red-200);
  --color-danger-ghost: var(--red-ghost);    /* red text on a white secondary button ("Delete")   */
  --color-info: var(--blue-600);      --color-info-bg: var(--blue-50);      --color-info-on: var(--blue-700);
  --color-info-line: var(--blue-200);
  /* off — the reference's own hue, not a step of --gray-*: one value for both text and dot,
     no separate -on, and --gray-100/--gray-300 each back too many other roles to retint in place */
  --color-off: #5D6B72;               --color-off-bg: #ECF0F1;              --color-off-on: #5D6B72;
  --color-off-line: #D6DDE0;                 /* a fourth, neutral tone: inactive, not an error     */
  --color-badge-dark: var(--gray-900);       /* the small count badge                             */
  --color-notify: var(--red-500);            /* the notification dot                              */
  --color-selected: var(--blue-50);          /* a selected row's own tint, and the bulk-bar's      */
  /* categorical data — charts and the segmented bar; adjacent entries differ in luminance too */
  --color-data-1: var(--blue-600); --color-data-2: var(--purple-600); --color-data-3: var(--teal-400);
  --color-data-4: var(--blue-400); --color-data-5: var(--gray-300);

  /* ── TYPOGRAPHY ────────────────────────────────────────────────────────── */
  /* Preline is the system stack; the Arabic face leads so Arabic renders with a proper face on
     every OS. Arabic is never letter-spaced (base.css enforces it). */
  --font-body: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, system-ui, sans-serif;
  --font-heading: var(--font-body);
  --font-mono: "IBM Plex Mono", "Courier New", monospace;
  --text-2xs: 11.5px;                        /* subline text, chip/field labels, the code chip  */
  --text-xs: 12px;  --leading-xs: 16px;      /* labels in chips, kbd, group labels, th          */
  --text-sm: 14px;  --leading-sm: 20px;      /* THE base: body, inputs, buttons, nav, cells     */
  --text-md: 16px;  --leading-md: 24px;
  --text-lg: 18px;  --leading-lg: 28px;      /* card titles, mini-tile values                   */
  --text-xl: 20px;  --leading-xl: 28px;      /* page titles                                     */
  --text-2xl: 24px; --leading-2xl: 32px;     /* secondary numerals                              */
  --text-hero: 60px; --leading-hero: 60px;   /* the one hero numeral per page                   */
  --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700;
  /* table-reference.html's own one-off sizes — real steps in its rhythm, off the ladder above */
  --text-tip: 11px;                          /* the row tooltip                                 */
  --text-num: 12.5px;                        /* tabular cells, buttons, pager, results, page-size select */
  --text-chrome: 13px;                       /* bulk-bar, menu items, empty-state copy          */
  --text-name: 13.5px; --leading-name: 1.35; /* the bilingual name cell's primary line — unitless,
     so it scales with --text-name the way base.css's body line-height (1.55) does, rather than
     pinning table-reference.html's own 13.5×1.35 (18.225px) as a fixed step off the 4px grid  */
  --text-empty-h: 15.5px;                    /* the empty-state heading; pairs with --leading-md */

  /* ── SPACING · 4px base ────────────────────────────────────────────────── */
  --space-0-25: 1px; --space-0-5: 2px; --space-0-75: 3px; --space-1: 4px; --space-1-25: 5px; --space-1-5: 6px; --space-1-75: 7px; --space-2: 8px;
  --space-2-25: 9px; --space-2-5: 10px; --space-2-75: 11px; --space-3: 12px; --space-3-5: 14px;
  --space-4: 16px; --space-4-5: 18px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px;
  --space-18: 72px;      /* the empty-state panel's own vertical padding, table-reference.html:273 */
  /* --space-4-5 is the empty state's own p→button rhythm, table-reference.html:281 (`margin:0 auto 18px`). */
  --space-badge-block: 2.5px; /* the status badge's own vertical padding, half a hairline off-grid */
  /* --space-3-5, --space-0-25 and --space-badge-block are off the 4px grid on purpose: they are
     table-reference.html's own cell, code-chip and badge rhythms, none of which land on a multiple of 4. */

  /* ── RADIUS ─────────────────────────────────────────────────────────────── */
  --radius: 10px;         /* mirrors the reference's own --radius; no shipped consumer yet, kept for fidelity */
  --radius-2xs: 5px;      /* the code chip                      */
  --radius-xs: 7px;       /* icon-btn, pager buttons, .btn      */
  --radius-sm: 6px;      /* chips, kbd, small boxes            */
  --radius-md: 8px;      /* nav rows, buttons, inputs, tiles   */
  --radius-card: 14px;    /* cards, the empty-state icon tile   */
  --radius-lg: 12px;     /* menus, dialogs                     */
  --radius-menu: var(--radius); /* the dropdown menu panel — the same 10px as --radius */
  --radius-full: 9999px; /* pills, avatars, dots               */

  /* ── ELEVATION · borders carry it; shadow only for what floats ─────────── */
  --shadow-card: 0 1px 2px 0 rgba(18, 30, 27, 0.05), 0 4px 16px 0 rgba(18, 30, 27, 0.05);
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-pop: 0 20px 25px -5px rgb(0 0 0 / 0.10), 0 8px 10px -6px rgb(0 0 0 / 0.10);
  --shadow-focus: 0 0 0 1px var(--color-border-focus);
  --shadow-focus-ring: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-accent);
  --shadow-focus-glow: 0 0 0 3px var(--color-accent-soft);

  /* ── SIZES ──────────────────────────────────────────────────────────────── */
  --control-md: 38px;    /* inputs, standard buttons, topbar search, avatar  */
  --control-sm: 34px;    /* card-header and toolbar buttons, table search    */
  --control-xs: 30px;    /* the small pill button ("+ Add phone")            */
  --control-2xs: 28px;   /* an icon-only row action's own target             */
  --size-cell-check: 36px; /* the table's checkbox column width, table-reference.html:180        */
  --size-cell-actions: 96px; /* the row-actions column width, table-reference.html:208           */
  --size-empty-art: 52px;  /* the empty-state icon tile                        */
  --size-empty-copy: 340px; /* the empty-state paragraph's own max-width, table-reference.html:281 */
  --size-table-min: 340px;  /* .table-wrap's own min-height, so a short page keeps the card's height,
                                table-reference.html:151                                            */
  --nav-item: 36px;  --nav-sub-item: 32px;
  --sidebar-width: 260px; --topbar-height: 60px;
  --form-width: 576px; --form-label-width: 136px;
  --icon-xs: 12px; --icon-sm: 14px; --icon-md: 16px; --icon-lg: 20px; --icon-xl: 32px;
  --icon-empty: 24px;    /* the empty-state tile's own glyph                 */
  --icon-btn: 15px;      /* the reference's .icon-btn/.search glyph (15×15, table-reference.html:217) —
                             the row-action button, .search-clear and the toolbar search magnifier;
                             --icon-sm stays 14px everywhere else on the console                  */
  --icon-stroke: 2;      /* on a 24-unit viewBox, Preline's outline weight  */

  /* ── MOTION ─────────────────────────────────────────────────────────────── */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --fast: 0.15s var(--ease);

  /* ── OPACITY ────────────────────────────────────────────────────────────── */
  --opacity-row-actions: 0.45; /* a row's own actions, until the row (or an action) takes focus */
}

/* ==========================================================================
   DARK THEME — table-reference.html:29-75, blue substituted for teal exactly as
   the light theme's own accent family is. Both mechanisms carry the same values:
   the media query is the OS-level default, the attribute is an explicit override.
   Every token here also has a light default above — DarkTheme_DeclaresNoColourOnlyInADarkBlock
   pins that a token declared only in one of these two blocks renders as nothing on a light device.
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-canvas: #0F1514;
    --color-surface: #171E1C;
    --color-surface-sunken: #28332F;   /* active nav row, avatar and chips are unreadable at the light gray100 */
    --color-surface-raised: #1B2422;
    --color-border: #28332F;
    --color-border-strong: #3A4844;
    --color-text-heading: #E6ECEA;
    --color-text-body: #E6ECEA;
    --color-text-muted: #93A49E;
    --color-text-placeholder: #6C7D77;
    /* action-primary now tracks the accent family, so a primary button and the pager's current-page
       chip share one blue in dark, as the reference's own --accent does; its hover/on/subtle
       companions follow so neither .btn-primary:hover nor .icon-btn:hover regresses in the process */
    --color-action-primary: var(--color-accent);
    --color-action-primary-hover: var(--color-accent-ink);
    --color-action-primary-on: #0F1514;
    --color-action-primary-subtle: var(--color-accent-soft);
    --color-accent: var(--blue-400);
    --color-accent-ink: var(--blue-200);
    --color-accent-soft: rgba(80, 162, 255, 0.12);
    --color-accent-softer: rgba(80, 162, 255, 0.07);
    --color-cross: rgba(80, 162, 255, 0.08);
    --color-cross-strong: rgba(80, 162, 255, 0.16);
    --color-success-on: #5BC48D;
    --color-success-bg: rgba(91, 196, 141, 0.13);
    --color-success-line: rgba(91, 196, 141, 0.3);
    --color-warning-on: #E0B75B;
    --color-warning-bg: rgba(224, 183, 91, 0.12);
    --color-warning-line: rgba(224, 183, 91, 0.3);
    --color-off: #93A49E;
    --color-off-on: #93A49E;
    --color-off-bg: rgba(147, 164, 158, 0.13);
    --color-off-line: rgba(147, 164, 158, 0.3);
    --color-danger-ghost: #F0796E;
    --color-danger-bg: rgba(240, 121, 110, 0.12);
    --color-selected: rgba(80, 162, 255, 0.10);
    --shadow-card: 0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.25);
  }
}

:root[data-theme="dark"] {
  --color-canvas: #0F1514;
  --color-surface: #171E1C;
  --color-surface-sunken: #28332F;   /* active nav row, avatar and chips are unreadable at the light gray100 */
  --color-surface-raised: #1B2422;
  --color-border: #28332F;
  --color-border-strong: #3A4844;
  --color-text-heading: #E6ECEA;
  --color-text-body: #E6ECEA;
  --color-text-muted: #93A49E;
  --color-text-placeholder: #6C7D77;
  /* action-primary now tracks the accent family, so a primary button and the pager's current-page
     chip share one blue in dark, as the reference's own --accent does; its hover/on/subtle
     companions follow so neither .btn-primary:hover nor .icon-btn:hover regresses in the process */
  --color-action-primary: var(--color-accent);
  --color-action-primary-hover: var(--color-accent-ink);
  --color-action-primary-on: #0F1514;
  --color-action-primary-subtle: var(--color-accent-soft);
  --color-accent: var(--blue-400);
  --color-accent-ink: var(--blue-200);
  --color-accent-soft: rgba(80, 162, 255, 0.12);
  --color-accent-softer: rgba(80, 162, 255, 0.07);
  --color-cross: rgba(80, 162, 255, 0.08);
  --color-cross-strong: rgba(80, 162, 255, 0.16);
  --color-success-on: #5BC48D;
  --color-success-bg: rgba(91, 196, 141, 0.13);
  --color-success-line: rgba(91, 196, 141, 0.3);
  --color-warning-on: #E0B75B;
  --color-warning-bg: rgba(224, 183, 91, 0.12);
  --color-warning-line: rgba(224, 183, 91, 0.3);
  --color-off: #93A49E;
  --color-off-on: #93A49E;
  --color-off-bg: rgba(147, 164, 158, 0.13);
  --color-off-line: rgba(147, 164, 158, 0.3);
  --color-danger-ghost: #F0796E;
  --color-danger-bg: rgba(240, 121, 110, 0.12);
  --color-selected: rgba(80, 162, 255, 0.10);
  --shadow-card: 0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.25);
}