/* ============================================================================
   KIBO DESIGN TOKENS — CAREER PATH AFRICA
   Structure follows the modernist KiboFrame system (RGB channel tokens,
   neutral-ink shadows, layout metrics) so the component/section CSS ports
   cleanly. ONLY the colour tokens carry the brand — orange + brown + green.
   Swapping the brand means editing the "Brand" and RGB-channel blocks below;
   everything else is design system.

   This file is the primary source of truth for design tokens across every
   module, admin and public alike.

   NOTE: KiboWeb's careerpath.css aliases these tokens rather than declaring
   its own colour literals, so a rebrand is an edit to this file alone.
   Do not add competing :root blocks in other modules.

   Legacy aliases are preserved at the very end so any module still
   referencing them keeps resolving without churn.
   ============================================================================ */

:root {
    /* ── Brand ──────────────────────────────────────────────────────── */
    /* Career Path Africa palette — warm orange + earthy brown + fresh green.
       Orange is the dominant brand colour; brown provides the deep ink /
       inverted-surface tone; green provides accent for CTAs and highlights. */
    --primary-color:        #ea6a1e;   /* Career Path orange — dominant */
    --primary-light-color:  #f08a4b;   /* Light orange (gradient / hover) */
    --primary-dark-color:   #cf5910;   /* Dark orange (active) */
    --primary-darker-color: #a8460b;   /* Orange-darker (hero gradient floor) */
    --secondary-color:      #6b4226;   /* Earthy brown — secondary / supporting */
    --accent-color:         #8cc540;   /* Fresh green — CTA / highlight */
    --accent-dark-color:    #5e8f1f;   /* Green-dark (text on light) */
    --accent-light-color:   #a9d76b;   /* Green-light (gradient stop) */
    --neutral-color:        #4f3019;   /* Deep brown text/ink tone */
    --gradient-match-color: #cf5910;   /* Dark orange gradient end */

    /* RGB channels — for alpha compositing via rgba(var(--x-rgb), α)
       so tinted overlays reference the brand token, never a literal. */
    --primary-rgb:   234, 106, 30;     /* orange */
    --secondary-rgb: 107, 66, 38;      /* brown */
    --accent-rgb:    140, 197, 64;     /* green */
    --white-rgb:     255, 255, 255;
    --ink-rgb:       30, 39, 50;       /* warm-neutral ink shadow ground */

    /* Tinted brand surfaces (orange / brown / green tints over white) */
    --primary-soft:    #fdeee4;        /* orange-tint light */
    --primary-soft-2:  #fef6f1;        /* orange-tint lighter */
    --primary-soft-3:  #fadcc9;        /* orange-tint saturated (gradient stop) */
    --secondary-soft:  #f0e8e2;        /* brown-tint (active pills) */
    --accent-soft:     #eef7e2;        /* green-tint */

    /* ── Status ─────────────────────────────────────────────────────── */
    --success-color: #16a34a;
    --success-dark:  #15803d;
    --success-soft:  #e7f7ec;
    --success-rgb:   22, 163, 74;

    --warning-color: #d97706;
    --warning-dark:  #b45309;
    --warning-soft:  #fef3c7;
    --warning-rgb:   217, 119, 6;

    --danger-color:  #dc2626;
    --danger-dark:   #b91c1c;
    --danger-soft:   #fee2e2;
    --danger-rgb:    220, 38, 38;

    --info-color:    #0891b2;
    --info-dark:     #0e7490;
    --info-soft:     #e0f2fe;
    --info-rgb:      8, 145, 178;

    /* ── Surfaces ───────────────────────────────────────────────────── */
    --white-color: #ffffff;
    --light-color: #fbf7f2;          /* light surface — warm cream */

    --surface-0:   #fbf7f2;          /* page background — warm cream */
    --surface-1:   #ffffff;          /* cards, panels */
    --surface-2:   #f8f5f1;          /* subtle fills (bg->surface step) */
    --surface-3:   #f2ede6;          /* dividers, hover fills */
    --surface-inv: #4f3019;          /* dark surfaces (sidebar) — deep brown */

    --bg-light:    #f8f5f1;
    --bg-white:    #ffffff;
    --bg-gray:     #f6f4f1;
    --bg-dark:     #1e2732;          /* warm charcoal */

    /* ── Text (warm-neutral ramp against the orange/brown brand) ────── */
    --text-strong:    #1e2732;       /* page titles — warm charcoal */
    --text-dark:      #2c3642;       /* body — ink */
    --text-default:   #44505f;       /* secondary body */
    --text-secondary: #5b6675;       /* slate */
    --text-muted:     #7a8492;       /* captions, helper */
    --text-subtle:    #98a2b3;       /* placeholders, faint */
    --text-light:     #faf8f5;
    --text-accent:    #cf5910;       /* orange-dark reads well against white */
    --text-inverted:  #ffffff;

    /* ── Borders ────────────────────────────────────────────────────── */
    --border-color:  #e7e2db;
    --border-strong: #d5cec4;
    --border-light:  #f2eee9;
    --border-soft:   #efeae3;                /* hairline dividers */
    --border-focus:  var(--primary-color);   /* orange focus ring */

    /* ── Gradients (kept for legacy; prefer solid surfaces in modern UI) */
    --primary-gradient: linear-gradient(135deg, var(--primary-dark-color) 0%, var(--primary-light-color) 100%);
    --accent-gradient:  linear-gradient(135deg, var(--accent-color) 0%, var(--accent-dark-color) 100%);
    --success-gradient: linear-gradient(135deg, var(--success-color) 0%, var(--success-dark) 100%);
    --warning-gradient: linear-gradient(135deg, var(--warning-color) 0%, var(--warning-dark) 100%);
    --danger-gradient:  linear-gradient(135deg, var(--danger-color) 0%, var(--danger-dark) 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 ──────────────────────────────────────────────────────── */
    /* Modernist (Career Path Africa): sharp corners everywhere. All rectangular radii = 0.
       --border-radius-pill stays a real pill so genuinely circular things
       (avatars, status dots, toggles) remain round. */
    --border-radius-xs:  0;
    --border-radius-sm:  0;
    --border-radius:     0;
    --border-radius-md:  0;
    --border-radius-lg:  0;
    --border-radius-xl:  0;
    --border-radius-2xl: 0;
    --border-radius-pill: 9999px;

    /* Marketing-site radii. The admin shell is deliberately sharp, but the
       public marketing pages are a rounded, softer system — so they get their
       own scale rather than overriding --border-radius-* and flattening (or
       rounding) the admin by accident. Consumed by KiboWeb's careerpath.css. */
    --radius-xs:  6px;
    --radius-sm:  8px;
    --radius:     10px;
    --radius-md:  14px;
    --radius-lg:  20px;
    --radius-xl:  28px;
    --radius-pill: var(--border-radius-pill);
    --radius-circle: 50%;

    /* ── Shadows (neutral ink ground, composited from --ink-rgb) ────── */
    --shadow-xs:     0 1px 2px rgba(var(--ink-rgb), 0.06);
    --shadow-soft:   0 1px 3px rgba(var(--ink-rgb), 0.06), 0 1px 2px rgba(var(--ink-rgb), 0.04);
    --shadow-sm:     0 2px 4px rgba(var(--ink-rgb), 0.06), 0 1px 2px rgba(var(--ink-rgb), 0.04);
    --shadow-medium: 0 8px 24px rgba(var(--ink-rgb), 0.08), 0 2px 6px rgba(var(--ink-rgb), 0.04);
    --shadow-md:     0 8px 24px rgba(var(--ink-rgb), 0.12);   /* alias */
    --shadow-lg:     0 12px 32px rgba(var(--ink-rgb), 0.10), 0 4px 8px rgba(var(--ink-rgb), 0.06);
    --shadow-hard:   0 24px 48px rgba(var(--ink-rgb), 0.18), 0 6px 12px rgba(var(--ink-rgb), 0.08);
    --shadow-color:  rgba(var(--ink-rgb), 0.1);

    /* Focus ring */
    --focus-ring-color:   rgba(var(--primary-rgb), 0.28);     /* orange */
    --focus-ring:         0 0 0 3px var(--focus-ring-color);
    --focus-ring-danger:  0 0 0 3px rgba(var(--danger-rgb), 0.28);
    --focus-ring-success: 0 0 0 3px rgba(var(--success-rgb), 0.28);
    --focus-ring-warning: 0 0 0 3px rgba(var(--warning-rgb), 0.28);

    /* Semantic surfaces — selection, hover, ring-overlays */
    --ring-overlay-soft: rgba(var(--ink-rgb), 0.04);
    --ring-overlay-med:  rgba(var(--ink-rgb), 0.08);
    --selection-bg:      rgba(var(--primary-rgb), 0.16);
    --selection-color:   var(--neutral-color);

    /* ── 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);

    /* Composable duration+easing pairs. --transition-* above are full
       shorthands (they bake in `all`), so they can't be used as the value
       slot of `transition: color <x>`. These can. */
    --motion-fast:   0.15s var(--ease-out);
    --motion-normal: 0.25s var(--ease-out);
    --motion-slow:   0.5s  var(--ease-out);
    --motion-reveal: 0.7s  var(--ease-out);

    /* ── Layout (Career Path Africa metrics) ────────────────────────────────────── */
    --sidebar-width:        264px;
    --sidebar-collapsed:    76px;
    --header-height:        60px;
    --container-max-width:  1280px;
    --container-full-width:  100%;
    --content-padding:      var(--spacing-xl);
    --content-gutter:       var(--spacing-lg);

    /* ── Typography ─────────────────────────────────────────────────── */
    /* UI + display font — Archivo (loaded in templates/master.blade.php). */
    --font-family:        'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-family-display:'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 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;
    --font-weight-extrabold: 800;   /* Modernist heading weight */

    --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;

    /* ── Legacy aliases ─────────────────────────────────────────────── */
    /* Preserved so any module/view still referencing these keeps resolving.
       Prefer the tokens above in new CSS. */
    --off-white-color: rgba(251,247,242,0.9);
    --dark-color: #1e2732;
    --text-light-color: #faf8f5;

    /* Display/heading font — marketing pages reference --font-head (Sora);
       admin/user pages use --font-family (Archivo). Both are loaded in
       templates/master.blade.php. */
    --font-head: 'Sora', 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-body: var(--font-family);

    /* Margin/Padding aliases (legacy) */
    --margin-xs: 0.25rem;  --margin-sm: 0.5rem;  --margin-md: 1rem;
    --margin-lg: 1.5rem;   --margin-xl: 2rem;    --margin-2xl: 3rem;
    --padding-xs: 0.25rem; --padding-sm: 0.5rem; --padding-md: 1rem;
    --padding-lg: 1.5rem;  --padding-xl: 2rem;   --padding-2xl: 3rem;

    /* Hover fill (legacy) */
    --hover-bg: rgba(var(--primary-rgb), 0.08);
}