/*
 * Sagesa — design tokens
 *
 * Source of truth for color, type, spacing, radius, shadow, and motion
 * across all Sagesa apps. Drop this file into a new app's static directory
 * and @import it before your component styles.
 *
 * Anchored on the logo navy #023467. Five role-bound accent colors. Warm-
 * tinted neutrals (no pure #000 / #fff). Light mode only.
 *
 * See brand-design.md alongside for rationale and the principles each
 * token serves.
 */

:root {
    /* ============ Brand: navy scale (anchored on #023467) ============ */
    --navy-50:  #EEF2F8;
    --navy-100: #D8E1EE;
    --navy-200: #B1C2DA;
    --navy-300: #7E9AC2;
    --navy-400: #4F75A8;
    --navy-500: #1E4E89;
    --navy-600: #0E3D74;
    --navy-700: #06335F;
    --navy-800: #023467;   /* THE LOGO */
    --navy-900: #02244A;
    --navy-950: #011531;

    /* Secondary navy — lighter, less saturated. Used for sidebar accents,
       supporting chrome, secondary headings. */
    --navy-soft: #2C416D;

    /* ============ Role-bound accent palette (used sparingly) ============ */
    --coral-50:  #FFEFEC;
    --coral-100: #FFD6CE;
    --coral-300: #FFA293;
    --coral-500: #FE6B56;   /* Pop CTA — once per view, never destructive */
    --coral-600: #E54E38;
    --coral-700: #B83423;

    --sky-50:  #ECF6FB;
    --sky-100: #CFE7F1;
    --sky-300: #88BFD4;
    --sky-500: #5DA7C2;     /* Info */
    --sky-600: #3F87A4;
    --sky-700: #2A6A86;

    --leaf-50:  #ECF6EE;
    --leaf-100: #CDE8D3;
    --leaf-300: #8FC79A;
    --leaf-500: #579E68;    /* Success */
    --leaf-600: #408450;
    --leaf-700: #2D6539;

    --butter-50:  #FFFBED;
    --butter-100: #FFF5D1;
    --butter-300: #FFE383;
    --butter-500: #FFECA1;  /* Warning surface — use as fill, not text */
    --butter-600: #C9A746;
    --butter-700: #946E15;

    --rose-50:    #FBEAE7;
    --rose-100:   #F6CFC8;
    --rose-500:   #C8392B;  /* Destructive actions (delete, irreversible) */
    --rose-600:   #A82A1F;

    /* ============ Neutrals (tinted toward navy hue, no pure black/white) ============ */
    --paper:   #FFFFFF;
    --page:    #FAFAFB;          /* Page background — near-white, cool */
    --ink-50:  #F5F6F9;
    --ink-100: #ECEEF3;
    --ink-200: #DEE2EA;          /* Default border */
    --ink-300: #C2C8D4;          /* Strong border */
    --ink-400: #969FB1;          /* Disabled, icons */
    --ink-500: #6E7689;          /* Tertiary text */
    --ink-600: #515A6F;          /* Muted text */
    --ink-700: #353D52;          /* Secondary text */
    --ink-800: #1F2638;          /* Primary text */
    --ink-900: #0F1424;          /* High-emphasis text */

    /* ============ Semantic role aliases — use these in components ============ */
    --color-bg:             var(--page);
    --color-surface:        var(--paper);
    --color-surface-muted:  var(--ink-50);
    --color-text:           var(--ink-800);
    --color-text-muted:     var(--ink-500);
    --color-text-soft:      var(--ink-400);
    --color-border:         var(--ink-200);
    --color-border-strong:  var(--ink-300);

    --color-primary:        var(--navy-800);
    --color-primary-hover:  var(--navy-900);
    --color-primary-soft:   var(--navy-50);
    --color-primary-ring:   color-mix(in oklch, var(--navy-800) 35%, transparent);

    --color-accent:         var(--coral-500);
    --color-accent-hover:   var(--coral-600);
    --color-accent-ring:    color-mix(in oklch, var(--coral-500) 40%, transparent);

    --color-info:           var(--sky-600);
    --color-info-surface:   var(--sky-50);
    --color-info-border:    var(--sky-100);

    --color-success:        var(--leaf-600);
    --color-success-surface: var(--leaf-50);
    --color-success-border: var(--leaf-100);

    --color-warning:        var(--butter-700);
    --color-warning-surface: var(--butter-50);
    --color-warning-border: var(--butter-300);

    --color-danger:         var(--rose-500);
    --color-danger-hover:   var(--rose-600);
    --color-danger-surface: var(--rose-50);
    --color-danger-border:  var(--rose-100);

    /* ============ Sidebar (own tonal context — navy environment) ============ */
    --sidebar-bg:           var(--navy-900);
    --sidebar-bg-accent:    var(--navy-800);
    --sidebar-text:         #E4E9F2;
    --sidebar-text-soft:    #9BA7C2;
    --sidebar-active-bg:    var(--paper);
    --sidebar-active-text:  var(--navy-800);
    --sidebar-hover-bg:     rgba(255, 255, 255, 0.06);

    /* ============ Urgency ramp (Clintel-specific — clinical triage) ============ */
    --urgency-low-bg:     #E7F2E9;  --urgency-low-border:  #579E68;  --urgency-low-text:  #2E5638;
    --urgency-med-bg:     #FDE9CC;  --urgency-med-border:  #E8923C;  --urgency-med-text:  #8A4D05;
    --urgency-high-bg:    #FDE0DA;  --urgency-high-border: #FE6B56;  --urgency-high-text: #8F2C1C;
    --urgency-crit-bg:    #F8DAD6;  --urgency-crit-border: #C8392B;  --urgency-crit-text: #7A1F16;

    /* ============ Typography ============ */
    --font-display: "Stack Sans Notch", "Source Serif 4 Variable", Georgia, serif;
    --font-serif: "Source Serif 4 Variable", "Source Serif 4", "Iowan Old Style", Georgia, serif;
    --font-sans:  "DM Sans Variable", "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    --font-mono:  ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;

    /* Tighter ratio for product UI — ~1.15 between steps.
       Body anchored at 16px (never below). */
    --text-2xs:  0.6875rem;    /* 11px — uppercase micro-labels */
    --text-xs:   0.75rem;      /* 12px — captions, badges */
    --text-sm:   0.875rem;     /* 14px — UI default */
    --text-base: 1rem;         /* 16px — body */
    --text-md:   1.0625rem;    /* 17px — lead body */
    --text-lg:   1.1875rem;    /* 19px — card titles, h4 */
    --text-xl:   1.375rem;     /* 22px — h3 */
    --text-2xl:  1.625rem;     /* 26px — h2 / stat values */
    --text-3xl:  2rem;         /* 32px — h1 */
    --text-4xl:  2.5rem;       /* 40px — hero (rare) */

    --tracking-tight:  -0.02em;
    --tracking-snug:   -0.01em;
    --tracking-normal:  0;
    --tracking-wide:    0.1em;

    /* ============ Spacing (4px scale) ============ */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;

    /* ============ Radius ============ */
    --radius-xs:   4px;
    --radius-sm:   6px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-xl:   18px;
    --radius-pill: 9999px;

    /* ============ Shadow (tinted ink, sparse use) ============ */
    --shadow-xs: 0 1px 2px rgba(15, 20, 36, 0.04);
    --shadow-sm: 0 1px 2px rgba(15, 20, 36, 0.06), 0 1px 1px rgba(15, 20, 36, 0.03);
    --shadow-md: 0 8px 24px rgba(15, 20, 36, 0.08), 0 2px 4px rgba(15, 20, 36, 0.04);
    --shadow-lg: 0 24px 48px rgba(15, 20, 36, 0.14), 0 4px 12px rgba(15, 20, 36, 0.06);

    /* ============ Motion (Emil-weighted, exponential ease-out only) ============ */
    --duration-instant: 80ms;
    --duration-fast:    140ms;
    --duration-base:    200ms;
    --duration-modal:   240ms;
    --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
    --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out:    cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============ Honour prefers-reduced-motion ============ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}