/* ============================================================================
   MINDEF Concours Platform — DESIGN TOKENS
   ----------------------------------------------------------------------------
   Single source of truth for the visual language. Change values here to
   re-theme the entire platform without touching component or page code.

   Palette basis: Flag of Cameroon — Green, Red, Yellow — with White & Black
   as supporting neutrals. Institutional / authoritative tone.
   ============================================================================ */

:root {
  /* ---------------------------------------------------------------------------
     1. BRAND / FLAG COLORS
     Authentic Cameroon flag hues, plus tint/shade scales for UI states.
     --------------------------------------------------------------------------- */

  /* Green — primary brand color */
  --c-green-50:  #e7f4ee;
  --c-green-100: #c3e5d5;
  --c-green-200: #8fceb0;
  --c-green-300: #57b489;
  --c-green-400: #26996a;
  --c-green-500: #007a5e;   /* flag green */
  --c-green-600: #00664e;
  --c-green-700: #01513f;
  --c-green-800: #063f32;
  --c-green-900: #072b23;

  /* Red — accent / alerts / secondary actions */
  --c-red-50:  #fdeaec;
  --c-red-100: #f9c6cc;
  --c-red-200: #f195a0;
  --c-red-300: #e85f70;
  --c-red-400: #dc3448;
  --c-red-500: #ce1126;   /* flag red */
  --c-red-600: #ab0e20;
  --c-red-700: #870b19;
  --c-red-800: #630813;
  --c-red-900: #40060c;

  /* Yellow — highlights / stars / warnings */
  --c-yellow-50:  #fffbe8;
  --c-yellow-100: #fff3bf;
  --c-yellow-200: #ffe985;
  --c-yellow-300: #fcd116;   /* flag yellow */
  --c-yellow-400: #e6b800;
  --c-yellow-500: #c99e00;
  --c-yellow-600: #a37f00;
  --c-yellow-700: #7d6100;

  /* Neutrals — white to near-black */
  --c-white:   #ffffff;
  --c-gray-50:  #f6f8f7;
  --c-gray-100: #eef1f0;
  --c-gray-200: #dfe4e2;
  --c-gray-300: #c6cecb;
  --c-gray-400: #9aa5a1;
  --c-gray-500: #6f7c78;
  --c-gray-600: #515c59;
  --c-gray-700: #3a4340;
  --c-gray-800: #242b29;
  --c-gray-900: #141917;
  --c-black:   #0b0d0c;

  /* ---------------------------------------------------------------------------
     2. SEMANTIC ROLES  (map brand → meaning; components reference these)
     --------------------------------------------------------------------------- */
  --color-primary:        var(--c-green-600);
  --color-primary-hover:  var(--c-green-700);
  --color-primary-soft:   var(--c-green-50);
  --color-primary-contrast: var(--c-white);

  --color-accent:         var(--c-red-500);
  --color-accent-hover:   var(--c-red-600);
  --color-accent-soft:    var(--c-red-50);

  --color-highlight:      var(--c-yellow-300);
  --color-highlight-ink:  var(--c-gray-900);

  --color-bg:             var(--c-gray-50);
  --color-surface:        var(--c-white);
  --color-surface-2:      var(--c-gray-50);
  --color-ink:            var(--c-gray-900);
  --color-ink-soft:       var(--c-gray-600);
  --color-ink-muted:      var(--c-gray-500);
  --color-border:         var(--c-gray-200);
  --color-border-strong:  var(--c-gray-300);

  /* Status colors */
  --color-success:   var(--c-green-500);
  --color-success-bg: var(--c-green-50);
  --color-danger:    var(--c-red-500);
  --color-danger-bg: var(--c-red-50);
  --color-warning:   var(--c-yellow-400);
  --color-warning-bg: var(--c-yellow-50);
  --color-info:      #1f6feb;
  --color-info-bg:   #e8f0fe;

  /* Dark app chrome (sidebar / footer) */
  --color-chrome:        var(--c-green-900);
  --color-chrome-2:      var(--c-green-800);
  --color-chrome-ink:    #dbe7e1;
  --color-chrome-ink-muted: #8fa79c;
  --color-chrome-border: rgba(255, 255, 255, 0.08);

  /* ---------------------------------------------------------------------------
     3. TYPOGRAPHY
     --------------------------------------------------------------------------- */
  --font-heading: "Archivo", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", "Consolas", ui-monospace, monospace;

  --fs-xs:   0.75rem;   /* 12 */
  --fs-sm:   0.8125rem; /* 13 */
  --fs-base: 0.9375rem; /* 15 */
  --fs-md:   1rem;      /* 16 */
  --fs-lg:   1.125rem;  /* 18 */
  --fs-xl:   1.375rem;  /* 22 */
  --fs-2xl:  1.75rem;   /* 28 */
  --fs-3xl:  2.25rem;   /* 36 */
  --fs-4xl:  3rem;      /* 48 */
  --fs-5xl:  3.75rem;   /* 60 */

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;
  --fw-bold:    700;
  --fw-black:   800;

  --lh-tight: 1.15;
  --lh-snug:  1.35;
  --lh-normal: 1.6;

  --tracking-tight: -0.02em;
  --tracking-wide:  0.04em;
  --tracking-caps:  0.08em;

  /* ---------------------------------------------------------------------------
     4. SPACING & SIZING
     --------------------------------------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --space-10: 5rem;
  --space-12: 7rem;

  --container:      1200px;
  --container-wide: 1360px;
  --container-narrow: 720px;
  --sidebar-w:      264px;
  --topbar-h:       68px;

  /* ---------------------------------------------------------------------------
     5. RADII, SHADOWS, BORDERS, MOTION
     --------------------------------------------------------------------------- */
  --radius-sm: 6px;
  --radius:    10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-full: 999px;

  --shadow-xs: 0 1px 2px rgba(11, 13, 12, 0.06);
  --shadow-sm: 0 2px 6px rgba(11, 13, 12, 0.07);
  --shadow:    0 6px 18px rgba(11, 13, 12, 0.08);
  --shadow-md: 0 12px 30px rgba(11, 13, 12, 0.10);
  --shadow-lg: 0 24px 60px rgba(11, 13, 12, 0.16);

  --border-1: 1px solid var(--color-border);

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur:      200ms;
  --dur-slow: 360ms;

  --z-header: 100;
  --z-sidebar: 90;
  --z-dropdown: 500;
  --z-modal: 1000;
  --z-toast: 1200;

  /* Signature tricolor ribbon (flag motif) */
  --ribbon: linear-gradient(90deg,
      var(--c-green-500) 0 33.33%,
      var(--c-red-500) 33.33% 66.66%,
      var(--c-yellow-300) 66.66% 100%);
}