/* ============================================================================
   KIBO DESIGN TOKENS
   Single source of truth for color, typography, spacing, radii, shadows,
   motion and layout. Existing token names are preserved for backwards
   compatibility; new tokens are additive.
   ============================================================================ */

:root {
    /* ── Brand ──────────────────────────────────────────────────────── */
    /* SESCOM palette — forest green + amber. Token names preserved for
       backwards compatibility; values aligned with the public sescom.css
       design tokens (--green, --green-dark, --amber, etc.) so KiboFrame
       chrome (admin + public) reads as one coherent SESCOM identity. */
    --primary-color:        #1a7a3c;   /* Forest green — dominant brand */
    --primary-light-color:  #2ea055;   /* Mid-green (gradient match) */
    --primary-dark-color:   #0f4722;
    --secondary-color:      #1a7a3c;   /* SESCOM is monochromatic green; secondary mirrors primary */
    --accent-color:         #f59e0b;   /* Amber — CTA / highlight */
    --accent-dark-color:    #d97706;
    --neutral-color:        #0f172a;   /* Charcoal */
    --gradient-match-color: #0a3217;   /* Green-darker for hero gradients */

    /* Tinted brand surfaces (8-12% opacity over white) */
    --primary-soft:    #e8f5ee;        /* green-light */
    --primary-soft-2:  #f1faf4;        /* green-tint */
    --secondary-soft:  #e8f5ee;
    --accent-soft:     #fef3c7;        /* amber-light */

    /* ── Status ─────────────────────────────────────────────────────── */
    --success-color: #16a34a;
    --success-dark:  #15803d;
    --success-soft:  #e7f7ec;

    --warning-color: #d97706;
    --warning-dark:  #b45309;
    --warning-soft:  #fef3c7;

    --danger-color:  #dc2626;
    --danger-dark:   #b91c1c;
    --danger-soft:   #fee2e2;

    --info-color:    #0891b2;
    --info-dark:     #0e7490;
    --info-soft:     #e0f2fe;

    /* ── Surfaces ───────────────────────────────────────────────────── */
    --white-color: #ffffff;
    --light-color: #f4f6fb;

    --surface-0:   #f7f9fc;          /* page background */
    --surface-1:   #ffffff;          /* cards, panels */
    --surface-2:   #f8fafc;          /* table heads, subtle fills */
    --surface-3:   #f1f5f9;          /* dividers, hover fills */
    --surface-inv: #0f4722;          /* dark surfaces (sidebar, etc.) — SESCOM green-dark */

    --bg-light:    #f8fafc;
    --bg-white:    #ffffff;
    --bg-gray:     #f8fafc;
    --bg-dark:     #0f172a;          /* charcoal */

    /* ── Text ───────────────────────────────────────────────────────── */
    --text-strong:    #0f172a;       /* page titles */
    --text-dark:      #1e293b;       /* body */
    --text-default:   #334155;       /* secondary body */
    --text-secondary: #475569;
    --text-muted:     #64748b;       /* captions, helper */
    --text-subtle:    #94a3b8;       /* placeholders, faint */
    --text-light:     #f8fafc;
    --text-accent:    #d97706;       /* amber-dark reads well against white */
    --text-inverted:  #ffffff;

    /* ── Borders ────────────────────────────────────────────────────── */
    --border-color:  #e2e8f0;
    --border-strong: #cbd5e1;
    --border-light:  #f1f5f9;
    --border-focus:  #1a7a3c;        /* green focus ring */

    /* ── Gradients (kept for legacy; prefer solid surfaces in modern UI) */
    --primary-gradient: linear-gradient(135deg, #0f4722 0%, #1a7a3c 100%);
    --success-gradient: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    --warning-gradient: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    --danger-gradient:  linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);

    /* ── Spacing (4px base scale) ───────────────────────────────────── */
    --spacing-0:    0;
    --spacing-px:   1px;
    --spacing-xs:   0.25rem;   /* 4 */
    --spacing-sm:   0.5rem;    /* 8 */
    --spacing-md:   1rem;      /* 16 */
    --spacing-lg:   1.5rem;    /* 24 */
    --spacing-xl:   2rem;      /* 32 */
    --spacing-2xl:  3rem;      /* 48 */
    --spacing-3xl:  4rem;      /* 64 */

    /* ── Radii ──────────────────────────────────────────────────────── */
    --border-radius-xs:  4px;
    --border-radius-sm:  6px;
    --border-radius:     10px;
    --border-radius-md:  10px;
    --border-radius-lg:  14px;
    --border-radius-xl:  20px;
    --border-radius-2xl: 28px;
    --border-radius-pill: 9999px;

    /* ── Shadows (layered, modern) ──────────────────────────────────── */
    --shadow-xs:     0 1px 2px rgba(15, 23, 42, 0.06);
    --shadow-soft:   0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-sm:     0 2px 4px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-medium: 0 8px 24px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.04);
    --shadow-lg:     0 12px 32px rgba(15, 23, 42, 0.10), 0 4px 8px rgba(15, 23, 42, 0.06);
    --shadow-hard:   0 24px 48px rgba(15, 23, 42, 0.18), 0 6px 12px rgba(15, 23, 42, 0.08);

    /* Focus ring */
    --focus-ring-color: rgba(26, 122, 60, 0.28);     /* SESCOM green */
    --focus-ring:       0 0 0 3px var(--focus-ring-color);
    --focus-ring-danger: 0 0 0 3px rgba(220, 38, 38, 0.28);

    /* ── Motion ─────────────────────────────────────────────────────── */
    --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --transition-fast:   all 0.15s var(--ease-out);
    --transition-normal: all 0.22s var(--ease-out);
    --transition-slow:   all 0.4s  var(--ease-out);
    --hover-transform:   translateY(-1px);

    /* ── Layout ─────────────────────────────────────────────────────── */
    --sidebar-width:        260px;
    --sidebar-collapsed:    72px;
    --header-height:        64px;
    --container-max-width:  1280px;
    --container-full-width:  100%;
    --content-padding:      var(--spacing-xl);

    /* ── Typography ─────────────────────────────────────────────────── */
    --font-family:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-family-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

    --font-size-xs:   0.75rem;     /* 12 */
    --font-size-sm:   0.8125rem;   /* 13 */
    --font-size-md:   0.875rem;    /* 14 */
    --font-size-base: 0.9375rem;   /* 15 — body */
    --font-size-lg:   1rem;        /* 16 */
    --font-size-xl:   1.125rem;    /* 18 */
    --font-size-2xl:  1.375rem;    /* 22 */
    --font-size-3xl:  1.75rem;     /* 28 */
    --font-size-4xl:  2.125rem;    /* 34 */

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

    --line-height-tight:  1.2;
    --line-height-snug:   1.375;
    --line-height-normal: 1.55;
    --line-height-relaxed: 1.7;

    --letter-spacing-tight:  -0.01em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide:   0.04em;

    /* ── Z-index ────────────────────────────────────────────────────── */
    --z-dropdown:       1000;
    --z-sticky:         1020;
    --z-fixed:          1030;
    --z-offcanvas:      1035;
    --z-modal-backdrop: 1040;
    --z-modal:          1050;
    --z-popover:        1060;
    --z-tooltip:        1070;
    --z-toast:          1080;
}