/* ==========================================================================
   GroomCaptain design tokens — "Harbor" direction
   --------------------------------------------------------------------------
   Loaded immediately after the Yzen template stylesheet so that:
     1. the `--gc-*` namespace is available to every later stylesheet, and
     2. the handful of Yzen `:root` variables the template relies on are
        remapped onto GroomCaptain brand values instead of the stock green.

   Anchored on docs/groomcaptain-brand-kit.md:
     deep teal #0f5f58 · warm orange #f2a65a · dark navy #102033
   ========================================================================== */

:root {
    /* ---- Brand ---------------------------------------------------------- */
    --gc-brand-teal: #0f5f58;
    --gc-brand-amber: #f2a65a;
    --gc-brand-navy: #102033;

    /* ---- Ink / structural navy ramp (sidebar, deep chrome) -------------- */
    --gc-ink-900: #0a1622;
    --gc-ink-800: #102033;
    --gc-ink-700: #1a3047;
    --gc-ink-600: #27435e;
    --gc-ink-500: #3b5a76;

    /* ---- Primary (teal) -------------------------------------------------- */
    --gc-primary: #0f5f58;
    --gc-primary-hover: #0c4f49;
    --gc-primary-active: #093c37;
    --gc-primary-bright: #16897e;
    --gc-primary-on: #ffffff;
    --gc-primary-surface: #e8f2f0;
    --gc-primary-surface-strong: #d3e7e3;
    --gc-primary-border: #b4d5cf;
    --gc-primary-rgb: 15, 95, 88;

    /* ---- Secondary accent (warm amber) ---------------------------------- */
    --gc-accent: #f2a65a;
    --gc-accent-strong: #c9762a;
    --gc-accent-surface: #fdf1e3;
    --gc-accent-border: #f2d3ae;
    --gc-accent-rgb: 242, 166, 90;

    /* ---- Neutral surfaces ------------------------------------------------ */
    --gc-surface-page: #f4f6f6;
    --gc-surface: #ffffff;
    --gc-surface-subtle: #f8faf9;
    --gc-surface-sunken: #eef1f1;
    --gc-surface-inverse: var(--gc-ink-800);

    /* ---- Borders --------------------------------------------------------- */
    --gc-border: #dde3e2;
    --gc-border-subtle: #e9eeed;
    --gc-border-strong: #c3ccca;

    /* ---- Text ------------------------------------------------------------ */
    --gc-text: #13212b;
    --gc-text-secondary: #55636b;
    /* Dark enough to clear 4.5:1 against the page background (#f4f6f6), not
       just against white — muted text is often used on the page itself. */
    --gc-text-muted: #64707a;
    --gc-text-on-dark: #ffffff;
    --gc-text-on-dark-muted: rgba(255, 255, 255, 0.68);

    /* ---- Status (all AA on white for normal text) ------------------------ */
    --gc-success: #1e7a4d;
    --gc-success-surface: #e7f4ec;
    --gc-success-border: #bcdfcb;

    --gc-warning: #9a5a00;
    --gc-warning-surface: #fdf2e0;
    --gc-warning-border: #f0d8ac;

    --gc-danger: #b3261e;
    --gc-danger-surface: #fceceb;
    --gc-danger-border: #f0c4c1;

    --gc-info: #1f6a8f;
    --gc-info-surface: #e8f1f6;
    --gc-info-border: #bcd7e5;

    /* ---- Interaction states ---------------------------------------------- */
    --gc-hover-surface: rgba(15, 95, 88, 0.06);
    --gc-selected-surface: var(--gc-primary-surface);
    --gc-selected-border: var(--gc-primary-border);
    --gc-focus-ring: 0 0 0 2px var(--gc-surface), 0 0 0 4px rgba(15, 95, 88, 0.55);
    --gc-focus-ring-dark: 0 0 0 2px var(--gc-ink-800), 0 0 0 4px rgba(242, 166, 90, 0.75);

    /* ---- Typography ------------------------------------------------------ */
    --gc-font: "Plus Jakarta Sans", "Segoe UI", Helvetica, Arial, sans-serif;

    --gc-font-size-page-title: 1.375rem;   /* 22px — page identity           */
    --gc-font-size-section: 1rem;          /* 16px — section heading         */
    --gc-font-size-card-title: 0.9375rem;  /* 15px — card / list heading     */
    --gc-font-size-body: 0.875rem;         /* 14px — app body                */
    --gc-font-size-table: 0.8125rem;       /* 13px — dense table text        */
    --gc-font-size-label: 0.8125rem;       /* 13px — form labels             */
    --gc-font-size-helper: 0.75rem;        /* 12px — helper / meta           */
    --gc-font-size-button: 0.8125rem;      /* 13px — buttons                 */
    --gc-font-size-metric: 1.75rem;        /* 28px — numeric emphasis        */
    --gc-font-size-eyebrow: 0.6875rem;     /* 11px — uppercase eyebrow       */

    --gc-line-tight: 1.25;
    --gc-line-body: 1.5;

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

    /* ---- Spacing scale (4px base) ---------------------------------------- */
    --gc-space-1: 0.25rem;
    --gc-space-2: 0.5rem;
    --gc-space-3: 0.75rem;
    --gc-space-4: 1rem;
    --gc-space-5: 1.25rem;
    --gc-space-6: 1.5rem;
    --gc-space-8: 2rem;
    --gc-space-10: 2.5rem;
    --gc-space-12: 3rem;

    /* ---- Layout ---------------------------------------------------------- */
    --gc-page-max: 1560px;
    --gc-page-padding-x: 1.5rem;
    --gc-page-padding-x-sm: 1rem;
    --gc-section-gap: 1.5rem;
    --gc-panel-padding: 1.25rem;
    --gc-panel-padding-sm: 1rem;
    --gc-field-gap: 1rem;
    --gc-row-height: 3rem;
    --gc-row-height-compact: 2.5rem;
    --gc-control-height: 2.375rem;
    --gc-control-height-sm: 2rem;
    --gc-touch-target: 2.75rem;

    /* ---- Shape ----------------------------------------------------------- */
    --gc-radius-sm: 6px;
    --gc-radius: 10px;
    --gc-radius-lg: 14px;
    --gc-radius-pill: 999px;

    /* ---- Elevation (used sparingly: overlays only) ------------------------ */
    --gc-shadow-none: none;
    --gc-shadow-raised: 0 1px 2px rgba(16, 32, 51, 0.05);
    --gc-shadow-popover: 0 8px 24px -8px rgba(16, 32, 51, 0.22), 0 2px 6px rgba(16, 32, 51, 0.06);
    --gc-shadow-overlay: 0 24px 60px -20px rgba(16, 32, 51, 0.38), 0 4px 12px rgba(16, 32, 51, 0.1);

    /* ---- Motion ---------------------------------------------------------- */
    --gc-transition: 140ms ease;

    /* ======================================================================
       Yzen template remap.
       The template computes most of its chrome from these variables, so
       overriding them here re-skins Bootstrap + Yzen in one place instead of
       scattering brand hex values through page CSS.
       ====================================================================== */
    --primary-rgb: 15, 95, 88;
    --secondary-rgb: 39, 67, 94;
    --body-bg-rgb: 244, 246, 246;

    /* The template's semantic palette drives .btn-success, .bg-*-transparent,
       .text-* and friends through `rgb(var(--x-rgb)) !important`. Left alone it
       leaks a bright #53C405 green and a neon #0FBCF9 blue into the redesign —
       most visibly on dialog Save buttons. Remap it onto the status tokens. */
    --success-rgb: 30, 122, 77;
    --warning-rgb: 154, 90, 0;
    --danger-rgb: 179, 38, 30;
    --info-rgb: 31, 106, 143;
    --orange-rgb: 242, 166, 90;
    --teal-rgb: 22, 137, 126;
    --green-rgb: 30, 122, 77;
    --purple-rgb: 39, 67, 94;
    --pink-rgb: 179, 38, 30;
    --light-rgb: 238, 241, 241;
    --dark-rgb: 19, 33, 43;

    --default-text-color: #13212b;
    --default-border: #dde3e2;
    --default-background: #f8faf9;
    --bootstrap-card-border: #dde3e2;
    --list-hover-focus-bg: #f8faf9;
    --input-border: #c3ccca;
    --form-control-bg: #ffffff;
    --text-muted: var(--gc-text-muted);
    --default-font-family: var(--gc-font);
    --menu-bg: var(--gc-ink-800);
    --menu-border-color: rgba(255, 255, 255, 0.08);

    /* Telerik/Kendo theme hooks so grid, scheduler, window and picker chrome
       follow the same palette instead of the stock Bootstrap theme. */
    --kendo-color-primary: #0f5f58;
    --kendo-color-primary-hover: #0c4f49;
    --kendo-color-primary-active: #093c37;
    --kendo-color-success: #1e7a4d;
    --kendo-color-warning: #9a5a00;
    --kendo-color-error: #b3261e;
    --kendo-color-info: #1f6a8f;
    --kendo-color-base: #ffffff;
    --kendo-color-border: #dde3e2;
    --kendo-border-radius-md: 6px;

    /* Bootstrap surface hooks used by .btn/.badge/.alert utilities */
    --bs-primary-rgb: 15, 95, 88;
    --bs-secondary-rgb: 39, 67, 94;
    --bs-success-rgb: 30, 122, 77;
    --bs-warning-rgb: 154, 90, 0;
    --bs-danger-rgb: 179, 38, 30;
    --bs-info-rgb: 31, 106, 143;
    --bs-body-font-family: var(--gc-font);
    --bs-body-color: var(--gc-text);
    --bs-border-color: var(--gc-border);
    --bs-border-radius: var(--gc-radius);

    /* Bootstrap also exposes flat colour variables that page CSS reads
       directly (the Shifts split button borders itself with --bs-primary).
       Left at stock they reintroduce Bootstrap blue. */
    --bs-primary: #0f5f58;
    --bs-secondary: #27435e;
    --bs-success: #1e7a4d;
    --bs-warning: #9a5a00;
    --bs-danger: #b3261e;
    --bs-info: #1f6a8f;
    --bs-light: #eef1f1;
    --bs-dark: #13212b;
    --bs-link-color: #0f5f58;
    --bs-link-hover-color: #0c4f49;
}

/* Respect reduced-motion for every transition the design system introduces. */
@media (prefers-reduced-motion: reduce) {
    :root {
        --gc-transition: 0ms;
    }
}