/* ============================================
   00-SETTINGS (design tokens & layout vars)
   ============================================ */
@layer settings {
  :root {
    /* ---------- Palette ---------- */
    /* Brand / base surfaces */
    --clr-berry-950: #0f0009;   /* deepest surface, below berry-900 */
    --clr-berry-900: #1a0510;   /* app background, content, tools */
    --clr-berry-800: #2e0c1a;   /* header/footer bars, hovers */
    --clr-berry-700: #4a1228;   /* tab bar */
    --clr-berry-600: #7a1348;   /* sidebar background */
    --clr-berry-500: #9e1a5e;   /* accents, active states */
    --clr-berry-400: #c4226e;   /* hover states */
    --clr-berry-400-rgb: 196, 34, 110;   /* #c4226e as RGB */
    --clr-berry-500-rgb: 158, 26, 94;  /* #9e1a5e as RGB for rgba() */
    --clr-berry-300: #d4537e;   /* mid berry-pink, text and accents */
    --clr-berry-300-rgb: 212, 83, 126;   /* #d4537e as RGB for rgba() */
    --clr-berry-200: #e891b8;   /* light berry, subtle text */

    /* Status / CTAs */
    --clr-success: #28c76f;
    --clr-success-dark: #20a55a;
    --clr-success-light: #5fdb9a;   /* light green text on dark backgrounds */
    --clr-warning: #ff9f43;
    --clr-warning-dark: #e6893b;
    --clr-warning-subtle: #fff3cd;   /* light amber background tint */
    --clr-danger: #ea5455;
    --clr-danger-rgb: 234, 84, 85;
    --clr-danger-dark: #d74344;
    --clr-danger-light: #ea868f;   /* light red text on dark backgrounds */
    --clr-danger-subtle: #fca5a5;   /* very light red tint for backgrounds */
    --clr-primary: #7367f0;
    --clr-primary-dark: #5c55d3;
    --clr-primary-light: #c19eff;   /* light purple text on dark backgrounds */
    --clr-info: #4a9edd;   /* info blue, interactive and badge use */
    --clr-info-dark: #1557b0;   /* info blue hover/pressed */
    --clr-info-light: #4fc3f7;   /* light blue text on dark backgrounds */
    --clr-info-subtle: #d9f1ff;   /* very light blue tint for backgrounds */

    /* Text & neutrals */
    --clr-text: #2c3e50;
    --clr-heading: #1b263b;
    --clr-white: #ffffff;
    --clr-black: #000000;

    /* Surfaces */
    --clr-surface-100: #f4f6f9;
    --clr-surface-200: #f9f9f9;
    --clr-surface-300: #f4f4f6;
    --clr-surface-900: #1f1321;

    /* One-offs promoted to tokens (for congruency) */
    /* Note: --clr-ok → --clr-success, --clr-bad → --clr-danger,
       --clr-muted → --text-secondary, --clr-danger-text → --clr-danger-light */
    --clr-table-header: #aaa;
    --clr-trash-bg: #d5b3c4; /* accordion body background */
    /* --clr-like: removed (unused) */
    --clr-attn: #ffc107; /* star hover */
    --clr-input-border: #dcdfe6;
    --clr-yellow: #FFD600;   /* production block header, AAG archived indicator */

    /* Common alpha colors (used for borders/shadows/overlays) */
    --white-a02: rgba(255,255,255,.02);
    --white-a03: rgba(255,255,255,.03);
    --white-a04: rgba(255,255,255,.04);
    --white-a05: rgba(255,255,255,.05);
    --white-a06: rgba(255,255,255,.06);
    --white-a07: rgba(255,255,255,.07);
    --white-a08: rgba(255,255,255,.08);
    --white-a10: rgba(255,255,255,.10);
    --white-a12: rgba(255,255,255,.12);
    --white-a14: rgba(255,255,255,.14);
    --white-a15: rgba(255,255,255,.15);
    --white-a18: rgba(255,255,255,.18);
    --white-a20: rgba(255,255,255,.20);
    --white-a25: rgba(255,255,255,.25);
    --white-a30: rgba(255,255,255,.30);
    --white-a35: rgba(255,255,255,.35);
    --white-a40: rgba(255,255,255,.40);
    --white-a45: rgba(255,255,255,.45);
    --white-a50: rgba(255,255,255,.50);
    --white-a55: rgba(255,255,255,.55);
    --white-a60: rgba(255,255,255,.60);
    --white-a65: rgba(255,255,255,.65);
    --white-a70: rgba(255,255,255,.70);
    --white-a75: rgba(255,255,255,.75);
    --white-a80: rgba(255,255,255,.80);
    --white-a85: rgba(255,255,255,.85);
    --white-a90: rgba(255,255,255,.90);
    --white-a92: rgba(255,255,255,.92);

    /* Badge colour tokens (shared across activity, admin, gra, agreements, um) */
    --badge-green-bg:   rgba(40,199,111,.10);
    --badge-green-text: #28c76f;
    --badge-green-bd:   rgba(40,199,111,.20);
    --badge-red-bg:     rgba(239,68,68,.10);
    --badge-red-text:   var(--clr-danger);
    --badge-red-bd:     rgba(239,68,68,.20);
    --badge-amber-bg:   rgba(186,117,23,.10);
    --badge-amber-text: #ba7517;
    /* same family as --clr-warning-dark, kept separate for badge specificity */
    --badge-amber-bd:   rgba(186,117,23,.20);
    --badge-blue-bg:    rgba(74,158,221,.10);
    --badge-blue-text:  #4a9edd;
    --badge-blue-bd:    rgba(74,158,221,.20);
    --badge-purple-bg:  rgba(147,51,234,.10);
    --badge-purple-text:#9333ea;
    --badge-purple-bd:  rgba(147,51,234,.20);
    --badge-teal-bg:    rgba(20,184,166,.10);
    --badge-teal-text:  #14b8a6;
    --badge-teal-bd:    rgba(20,184,166,.20);
    --badge-grey-bg:    var(--white-a04);
    --badge-grey-text:  var(--white-a40);
    --badge-grey-bd:    var(--white-a08);

    /* Text hierarchy tokens (WCAG AA compliant on berry backgrounds) */
    --text-primary: var(--white-a90);
    --text-secondary: var(--white-a65);
    --text-tertiary: var(--white-a50);
    --text-placeholder: var(--white-a35);

    --black-a45: rgba(0,0,0,.45);
    --primary-a25: rgba(115,103,240,.25);

    --gray-150: #f0f0f0;   /* base - light hover bg */

    /* Divider tokens */
    --divider-subtle: 1px solid var(--white-a08);
    --divider-light: 1px solid var(--white-a12);
    --divider-medium: 1px solid var(--white-a15);
    --divider-berry: 1px solid rgba(var(--clr-berry-400-rgb), 0.25);

    /* Supplementary colour tokens */
    --clr-portal-location: #378ADD;
    --clr-portal-office: #1D9E75;
    --clr-grey-100: #f0f0f0;
    --clr-dark: #1a1a1a;

    /* Category (use-dates) colors */
    --cat-prep-bg:       #d9fdd3;
    --cat-prep-bd:       #a8e6a0;

    --cat-shoot-bg:      #dceeff;
    --cat-shoot-bd:      #b9dbff;

    --cat-hold-bg:       #ffe7ba;
    --cat-hold-bd:       #ffd488;
    --cat-hold-fg:       #5a4400;

    --cat-strike-bg:     #ffd6d6;
    --cat-strike-bd:     #ffadad;

    /* flatpickr - Common alpha used by flatpickr selection ring */
    --black-a15: rgba(0,0,0,.15);

    /* Accordion - subtle tints & extras used here */
    --tint-berry-50: #f9e5f1;         /* light header tint for cards */
    --orange-500: #ff9800;            /* soft orange for status-warn */
    --black-a06: rgba(0,0,0,.06);
    --black-a08: rgba(0,0,0,.08);
    --berry-a25: rgba(122,19,76,.25); /* focus ring based on --clr-berry-800 */
    --yellowheader: rgb(249, 249, 95);

    /* Accordion - edit-mode tokens (used in multiple places) */
    --edit-bg: #e9f5ff;
    --edit-border: #b6dcff;

    /* Modal - More black alphas for shadows */
    --black-a20: rgba(0,0,0,.20);

    /* Modal - Neutrals used as borders in this file */
    --gray-100: #f1f3f5;
    --gray-300: #ccc;
    --gray-350: #ddd;

    /* Modal - "Berry panel" tones used in add-location + tools */
    --berry-panel-bg: #2e0c1a;
    --berry-panel-bd: #3a0030;

    /* Modal - Accent text color seen in add-location */
    --clr-antique: #faebd7;

    /* AAG - Accent text color seen in add-location */
    --black-a075: rgba(0,0,0,.075);       /* soft card shadow */
    --gray-600: #6c757d;                  /* secondary text */
    --offday-bg: #d9f0ff;                 /* weekend/bank-holiday fill */
    --highlight-warn-a15: rgba(255,235,59,.15); /* editable focus tint */

    /* Extractor */
    --ff-calibri: 'Calibri', 'Gill Sans MT', sans-serif;
    --accent-magenta: #cc00cc;          /* buttons/hover */
    /* --offday-alt-bg: removed (unused) */

    /* Labour Flow */
    --gray-050: #f8f8f8;   /* light page bg */
    --gray-700: #444;      /* mid text used in small cells */
    /* --blue-200, --btn-danger-600, --btn-danger-700, --ff-labour: removed (unused) */

    /* Login - Auth background gradients */
    --auth-grad-1: #6a0f42;
    --auth-grad-2: #380a22;

    /* Login - Berry extras used on auth buttons/active states */
    --clr-berry-900-deep: #5a0e39;  /* darker hover */

    /* Login - Pink accent used in logo chips */
    --pink-400: #b34f87;

    /* Login - Flash message palette */
    --flash-success-bd: rgba(40,192,129,.35);
    --flash-success-fg: #bff2dd;
    --flash-danger-bd:  rgba(224,82,96,.35);
    --flash-danger-fg:  #ffd3da;
    --flash-info-bd:    rgba(122,19,76,.45);
    --flash-info-fg:    #f3d6e6;

    /* Login - Extra tints seen in auth labels/text */
    --rose-200: #f1cfe0;

    /* Scheduler */
    --gray-500: #999;     /* placeholder text */
    --gray-550: #888;     /* outlines */
    --gray-900: #222;     /* dark text used in drag image */
    --gray-275: #d0d7de; /* soft outline (GitHub-ish) */
    --gray-475: #98a2b3; /* mid text for placeholders */

    --blue-025: #eef;     /* very light hover in saved list */

    /* Scheduler - Oranges for DnD visuals */
    --orange-200: #ffedd5;
    --orange-300: #ffe0b2;
    --orange-400: #ffb74d;

    /* ---------- Typography ---------- */
    --ff-sans: "Segoe UI", "Helvetica Neue", Arial, sans-serif;

    /* Font-size scale (9 stops) */
    --fs-xs:   9px;    /* tiny labels, overflow counts, fine print */
    --fs-sm:   10px;   /* compact labels where needed */
    --fs-base: 11px;   /* primary body text, table cells, accordion */
    --fs-md:   12px;   /* form inputs, default UI text */
    --fs-lg:   13px;   /* emphasis text, policy body */
    --fs-xl:   15px;   /* subheadings, nav items */
    --fs-h3:   16px;   /* section headings */
    --fs-h2:   18px;   /* page titles */
    --fs-h1:   26px;   /* hero headings */

    /* Text size scale — controlled by user preference */
    --fs-scale: 1;

    /* Scaled font-size tokens — use throughout the app */
    --fs-xs-s:   calc(var(--fs-xs)   * var(--fs-scale));
    --fs-sm-s:   calc(var(--fs-sm)   * var(--fs-scale));
    --fs-base-s: calc(var(--fs-base) * var(--fs-scale));
    --fs-md-s:   calc(var(--fs-md)   * var(--fs-scale));
    --fs-lg-s:   calc(var(--fs-lg)   * var(--fs-scale));
    --fs-xl-s:   calc(var(--fs-xl)   * var(--fs-scale));
    --fs-h3-s:   calc(var(--fs-h3)   * var(--fs-scale));
    --fs-h2-s:   calc(var(--fs-h2)   * var(--fs-scale));
    --fs-h1-s:   calc(var(--fs-h1)   * var(--fs-scale));

    /* ---------- Radius & Spacing ---------- */
    --radius-sm: 5px;
    --radius-md: 8px;
    --radius-lg: 10px;

    --space-1: 4px;
    --space-2: 5px;
    --space-3: 8px;
    --space-4: 10px;
    --space-5: 12px;
    --space-6: 16px;

    /* ---------- App Layout Vars ---------- */
    --sidebar-width: 180px;
    --sidebar-collapsed: 52px;
    --icon-size: 1.25rem;
    --icon-box: 44px;
    --sbw: var(--sidebar-width);

    --header-h: 46px;        /* used for sidebar top padding calc */
    --sidebar-top-h: 46px;
    --menu-start: 56px;      /* first menu item top offset */

    /* Page frame sizes (were hard-coded; now tokens) */
    --content-top: 106px;
    --content-bottom: 28px;
    --headerbar-h: 46px;
    --tabbar-h: 40px;
    --tabbar-top: 46px;      /* equals headerbar-h by default */
    --footerbar-h: 28px;

    /* Split view */
    --gutter: 6px;
    --left-min: 260px;
    --right-min: 280px;

    /* Z-index guide (hierarchical)
       Bootstrap overlay stack: offcanvas-backdrop 1040, offcanvas 1045,
       modal-backdrop 1050, modal 1055. Header-bar must sit below 1040. */
    /* Simplified tiers */
    --z-base: 1;
    --z-sticky: 10;
    --z-overlay: 500;
    --z-toast: 1100;

    /* App-specific layers */
    --z-content: 100;
    --z-tabbar: 1020;
    --z-sidebar: 1040;
    --z-backdrop: 1050;
    --z-modal: 1055;           /* Above backdrop */
    --z-offcanvas: 1060;       /* Above modal */
    --z-flash: 1070;           /* Above offcanvas */
    --z-headerbar: 1035;       /* Below Bootstrap overlay stack (1040+) */
    --z-header-buttons: 2000;
    --z-dropdown: 2100;        /* Above header/tab */
    --z-flatpickr: 2000;       /* Level with header buttons */
    --z-split-toolbar: 2;
    --z-lightbox: 99999;       /* Fullscreen overlay — above everything */
  }

  /* Collapsed-state override */
  html.sidebar-collapsed { --sbw: var(--sidebar-collapsed); }

  /* Flatpickr should appear above modals */
  .page-locations .flatpickr-calendar { z-index: 2000 !important; }

}