/*
 * DOAE HRCS design tokens for Blade components and shared UI.
 * References docs/design-system/spec.md § 2 and ADR-004 token namespace policy.
 * Do not edit values without updating the design system spec.
 */
:root {
    /* Brand */
    --ds-color-primary: #1976D2;
    --ds-color-primary-hover: #1565C0;
    --ds-color-secondary: #6C757D;

    /* Semantic */
    --ds-color-success: #28A745;
    --ds-color-success-bg: #D4EDDA;
    --ds-color-warning: #FFC107;
    --ds-color-warning-bg: #FFF3CD;
    --ds-color-danger: #DC3545;
    --ds-color-danger-bg: #F8D7DA;
    --ds-color-info: #17A2B8;
    --ds-color-info-bg: #D1ECF1;

    /* Neutrals */
    --ds-color-text: #212529;
    --ds-color-text-muted: #6C757D;
    --ds-color-border: #DEE2E6;
    --ds-color-bg: #FFFFFF;
    --ds-color-bg-alt: #F8F9FA;

    /* HRCS status code colors */
    --ds-color-status-draft: #6C757D;
    --ds-color-status-pending: #FFC107;
    --ds-color-status-approved: #28A745;
    --ds-color-status-rejected: #DC3545;
    --ds-color-status-canceled: #6C757D;

    /* Sprint 32b — brownfield color tokens (audit-driven, top hits from inline
       `color:#XXX` / `background:#XXX`). Names mirror semantic role where possible,
       fall back to neutral-N00 for pure greys. See audits/260528_phase-a-audit-tokens.md
       and docs/design-system/sprint-32b-color-token-diff.md. */
    --ds-color-black: #000000;                      /* 167 uses (color+bg #000000/#000) */
    --ds-color-success-bright: #00DD73;             /* 70 uses (DOAE primary success accent) */
    --ds-color-text-dark: #222222;                  /* 69 uses */
    --ds-color-surface-subtle: #F5F5F5;             /* 65 uses */
    --ds-color-neutral-700: #515151;                /* 60 uses */
    --ds-color-danger-ios: #FF453A;                 /* 55 uses (iOS-style danger red) */
    --ds-color-neutral-300: #E6E6E6;                /* 55 uses */
    --ds-color-success-legacy: #228C22;             /* 51 uses (legacy success green) */
    --ds-color-neutral-200: #EEEEEE;                /* 48 uses */
    --ds-color-bg-dark: #131312;                    /* 28 uses (dark surface) */
    --ds-color-charcoal: #343434;                   /* 26 uses */
    --ds-color-success-darker-alt: #4F9421;         /* 26 uses (gradient/banner green) */
    --ds-color-neutral-300-mid: #D9D9D9;            /* 26 uses */
    --ds-color-link-blue: #2E6DA4;                  /* 25 uses (Bootstrap link blue) */
    --ds-color-text-medium: #333333;                /* 24 uses (color:#333/#333333) */
    --ds-color-neutral-300-light: #E9E9E9;          /* 22 uses */
    --ds-color-danger-pure: #FF0000;                /* 18 uses (color:#FF0000/#F00) */
    --ds-color-neutral-300-alt: #D6D6D6;            /* 16 uses */
    --ds-color-neutral-600: #757575;                /* 15 uses */
    --ds-color-success-darker: #1A5F1A;             /* 15 uses */
    --ds-color-warning-orange: #EC971F;             /* 15 uses (Bootstrap warning hover) */
    --ds-color-danger-dark: #C9302C;                /* 15 uses (Bootstrap danger hover) */
    --ds-color-neutral-400: #AAAAAA;                /* 14 uses (#aaa/#aaaaaa) */
    --ds-color-bg-light: #F1F1F1;                   /* 13 uses */
    --ds-color-danger-bright: #FF0F00;              /* 13 uses */
    --ds-color-link-purple: #5271FF;                /* 11 uses */
    --ds-color-warning-amber-bright: #FFC000;       /* 10 uses */
    --ds-color-info-bright: #3FA5E3;                /* 10 uses */
    --ds-color-link-bootstrap: #337AB7;             /* 10 uses (Bootstrap default link) */
    --ds-color-warning-amber: #D58512;              /* 10 uses */
    --ds-color-danger-darker: #AC2925;              /* 10 uses */
    --ds-color-success-neon: #0DFF92;               /* 10 uses (neon accent) */
    --ds-color-neutral-300-pale: #DADADA;           /* 9 uses */
    --ds-color-danger-orange: #C44300;              /* 8 uses */
    --ds-color-warning-peach: #FFC9A3;              /* 8 uses */
    --ds-color-success-line: #00B900;               /* 6 uses (LINE brand green) */
    --ds-color-info-pale: #E5EEFF;                  /* 6 uses */
    --ds-color-danger-vivid: #FF0606;               /* 5 uses */
    --ds-color-danger-light: #FF8B8B;               /* 5 uses */

    /* Spacing — modular scale (Bootstrap-aligned 4px grid) */
    --ds-space-xxs: 2px;
    --ds-space-xs: 4px;
    --ds-space-sm: 8px;
    --ds-space-md: 16px;
    --ds-space-lg: 24px;
    --ds-space-xl: 32px;
    --ds-space-xxl: 48px;

    /* Sprint 32a — brownfield spacing tokens (audit-driven, top hits from inline `margin:Npx` / `padding:Npx`).
       See audits/260528_phase-a-audit-tokens.md. Sprint 32b will mechanically migrate inline styles to these. */
    --ds-spacing-xs: 5px;   /* 281 padding + 32 margin uses */
    --ds-spacing-sm: 7px;   /* 79 padding uses (HRCS common) */
    --ds-spacing-md: 10px;  /* 2,728 padding + 59 margin uses — top hit */
    --ds-spacing-lg: 15px;  /* 281 padding + 8 margin + directional uses */
    --ds-spacing-xl: 20px;  /* 29 padding + 1 margin + directional uses */
    --ds-spacing-2xl: 30px; /* 7 padding + 4 margin uses */
    --ds-spacing-3xl: 40px; /* 5 padding + 1 margin + 185 margin-left uses */
    --ds-spacing-4xl: 60px; /* 4 padding uses + large layout gaps */
    /* ADR-017 — odd brownfield values surfaced by CI blocking lint (margin/padding) */
    --ds-spacing-1: 1px;
    --ds-spacing-3: 3px;
    --ds-spacing-6: 6px;
    --ds-spacing-14: 14px;
    --ds-spacing-100: 100px;

    /* Border radius */
    --ds-radius-sm: 2px;
    --ds-radius-md: 4px;
    --ds-radius-lg: 8px;
    --ds-radius-pill: 9999px;

    /* Shadow */
    --ds-shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --ds-shadow-md: 0 4px 6px rgba(0,0,0,0.1);
    --ds-shadow-lg: 0 10px 15px rgba(0,0,0,0.1);

    /* Typography */
    --ds-font-family-sans-th: "Sarabun", "Noto Sans Thai", "Tahoma", sans-serif;
    --ds-font-family-sans-en: "Open Sans", "Inter", system-ui, sans-serif;
    --ds-font-family-serif: "Sarabun", serif;
    --ds-font-family-mono: "Sarabun", monospace;
    --ds-font-size-xs: 12px;
    --ds-font-size-sm: 14px;
    --ds-font-size-base: 16px;
    --ds-font-size-lg: 18px;
    --ds-font-size-xl: 20px;
    --ds-font-size-2xl: 24px;
    --ds-font-size-3xl: 30px;
    /* Sprint 32a — extended font sizes for brownfield migration (audit-driven, see audits/260528_phase-bcd-tick2-sprint-32a-typography.md) */
    --ds-font-size-15: 15px;
    --ds-font-size-22: 22px;
    --ds-font-size-25: 25px;
    --ds-font-size-28: 28px;
    --ds-font-size-32: 32px;
    --ds-line-height-tight: 1.25;
    --ds-line-height-normal: 1.5;
    --ds-line-height-loose: 1.75;
    --ds-font-weight-regular: 400;
    --ds-font-weight-medium: 500;
    --ds-font-weight-bold: 700;

    /* Z-index */
    --ds-z-dropdown: 1000;
    --ds-z-sticky: 1020;
    --ds-z-fixed: 1030;
    --ds-z-modal-bg: 1040;
    --ds-z-modal: 1050;
    --ds-z-popover: 1060;
    --ds-z-tooltip: 1070;
    --ds-z-toast: 1080;

    /* Breakpoints */
    --ds-bp-sm: 576px;
    --ds-bp-md: 768px;
    --ds-bp-lg: 992px;
    --ds-bp-xl: 1200px;

    /* Brand colors (from --v2-primary) */
    --ds-color-brand: var(--head_bg, #0094FF);
    --ds-color-brand-light: color-mix(in srgb, var(--ds-color-brand) 15%, white);
    --ds-color-brand-medium: color-mix(in srgb, var(--ds-color-brand) 40%, white);
    --ds-color-brand-dark: color-mix(in srgb, var(--ds-color-brand) 80%, black);
    --ds-color-brand-2: var(--head_bg2, #0094FF);
    --ds-color-brand-secondary: color-mix(in srgb, var(--ds-color-brand) 80%, black);

    /* Accent */
    --ds-color-accent: #D4A017;
    --ds-color-accent-light: #FEF9E7;

    /* Gray scale (Style Soft — no 600) */
    --ds-color-gray-50: #F9FAFB;
    --ds-color-gray-100: #F3F4F6;
    --ds-color-gray-200: #E5E7EB;
    --ds-color-gray-300: #D1D5DB;
    --ds-color-gray-400: #9CA3AF;
    --ds-color-gray-500: #6B7280;
    --ds-color-gray-700: #374151;
    --ds-color-gray-900: #111827;

    /* Shadow (Style Soft — soft-lg is a separate value, do NOT override --ds-shadow-lg) */
    --ds-shadow-soft: 0 2px 12px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06);
    --ds-shadow-soft-lg: 0 25px 35px rgba(0, 0, 0, 0.08);

    /* Radius (Style Soft soft variant — 16px large rounded) */
    --ds-radius-soft: 1rem;

    /* Level semantic colors */
    --ds-color-level-1: #662AD5;
    --ds-color-level-2: #227EE7;
    --ds-color-level-3: #30ABD0;

    /* Employee type colors */
    --ds-color-emp-svnt: #5151E1;
    --ds-color-emp-gov: #26B241;
    --ds-color-emp-per: #EB5236;
    --ds-color-emp-local: #EC4899;

    /* === Aliases for backward compat with session theme — see ADR-004 === */
    --color-primary: var(--ds-color-primary);
    --color-primary-hover: var(--ds-color-primary-hover);
    --color-secondary: var(--ds-color-secondary);
    --color-success: var(--ds-color-success);
    --color-success-bg: var(--ds-color-success-bg);
    --color-warning: var(--ds-color-warning);
    --color-warning-bg: var(--ds-color-warning-bg);
    --color-danger: var(--ds-color-danger);
    --color-danger-bg: var(--ds-color-danger-bg);
    --color-info: var(--ds-color-info);
    --color-info-bg: var(--ds-color-info-bg);
    --color-text: var(--ds-color-text);
    --color-text-muted: var(--ds-color-text-muted);
    --color-border: var(--ds-color-border);
    --color-bg: var(--ds-color-bg);
    --color-bg-alt: var(--ds-color-bg-alt);
}