/* ==========================================================================
   HHC DESIGN TOKENS
   ==========================================================================

   The values in docs/DESIGN-SYSTEM.md, as CSS custom properties.

   WHY THIS FILE EXISTS. Until now the spacing scale existed in one surface only —
   `hhc_attendance_app/lib/theme/tokens.dart` — and the web surfaces had no shared
   vocabulary at all. The console read Filament's defaults, the onboarding flow read
   Tailwind's arbitrary values, and the two agreed by coincidence rather than by design.
   A number that lives in three codebases and is written down in none of them is how a
   product ends up with 20px here and 24px there for the same job.

   THE 4px GRID IS THE POINT. Every step below is a multiple of 4, and each one is named
   for the JOB it does rather than its size, because "16" does not tell you whether it is
   the right answer — "the default gutter" does. The names match Flutter's `Spacing` class
   exactly, so a designer, an iOS engineer and a Blade template are all talking about
   `md` meaning the same 16px.

   Loaded before console-width.css. Neither file changes a colour Filament already owns;
   this one only PUBLISHES the scale so our own components stop inventing values.
   ========================================================================== */

:root {
    /* ---- the 4px grid ---------------------------------------------------- */
    --hhc-space-1: 0.25rem;   /*  4px — icon to its label, badge padding        */
    --hhc-space-2: 0.5rem;    /*  8px — inside a chip, label to its value       */
    --hhc-space-3: 0.75rem;   /* 12px — between rows inside one card            */
    --hhc-space-4: 1rem;      /* 16px — THE DEFAULT: gutter, card and cell padding */
    --hhc-space-6: 1.5rem;    /* 24px — between distinct sections               */
    --hhc-space-8: 2rem;      /* 32px — around the primary action               */
    --hhc-space-12: 3rem;     /* 48px — above a hero element                    */

    /* ---- radii ----------------------------------------------------------- */
    --hhc-radius-sm: 4px;
    --hhc-radius-md: 8px;     /* controls — Fluent's shape                       */
    --hhc-radius-lg: 12px;    /* cards — Apple's shape                           */
    --hhc-radius-xl: 20px;
    --hhc-radius-pill: 999px;

    /* ---- brand -----------------------------------------------------------
       Fluent blue. The mobile app already used it; the console used Filament's
       `amber`, which in this palette is the WARNING colour — so every primary
       button in the HR console read as a caution. One accent, used sparingly.
       ---------------------------------------------------------------------- */
    --hhc-brand: #0F6CBD;
    --hhc-brand-dark: #4CC2FF;   /* the same accent on a dark surface             */
    --hhc-brand-container: #EFF6FC;

    --hhc-ink: #1B1A19;
    --hhc-ink-muted: #5C5A58;
    --hhc-ink-subtle: #8A8886;
    --hhc-surface: #FFFFFF;
    --hhc-surface-alt: #F5F4F2;
    --hhc-outline: #E1DFDD;

    /* ---- status: four meanings, fixed on every surface (DESIGN-SYSTEM §2) -- */
    --hhc-success: #0E700E;
    --hhc-success-container: #DFF6DD;
    --hhc-warning: #9A6700;
    --hhc-warning-container: #FFF4CE;
    --hhc-danger: #C50F1F;
    --hhc-danger-container: #FDE7E9;
    --hhc-neutral: #8A8886;
    --hhc-neutral-container: #F5F4F2;

    /* ---- touch ----------------------------------------------------------- */
    --hhc-touch-target: 44px;    /* Apple HIG floor; Flutter uses 48dp          */
}

/* Dark surface: the brand lightens rather than staying put, because #0F6CBD on a dark
   background fails contrast. A brand colour that cannot be read is not a brand. */
.dark {
    --hhc-brand: #4CC2FF;
    --hhc-brand-container: #0B3A5C;
    --hhc-ink: #F5F4F2;
    --hhc-ink-muted: #C7C5C3;
    --hhc-ink-subtle: #8A8886;
    --hhc-surface: #1B1A19;
    --hhc-surface-alt: #242322;
    --hhc-outline: #3B3A38;

    --hhc-success: #6CCB6C;
    --hhc-success-container: #0B3D0B;
    --hhc-warning: #E8B339;
    --hhc-warning-container: #4A3600;
    --hhc-danger: #F1707C;
    --hhc-danger-container: #5A0A12;
    --hhc-neutral: #A5A3A1;
    --hhc-neutral-container: #2E2D2C;
}