/* ==========================================================================
   Orontes Portal — Design Tokens
   Palette sampled directly from "Orontes Flyer.pdf" and ORONTES LOGO 2024.
   Sand (yellowish) ground + mint (light blue-green) accent + ink navy.
   ========================================================================== */

:root {
  /* --- Brand core (from logo SVG) --- */
  --or-ink:            #2C3239;
  --or-mint:           #7BB7A9;

  /* --- Sand ramp (the yellowish ground, from the flyer) --- */
  --sand-50:           #FBF7F1;
  --sand-100:          #F8F2ED;   /* card / paper surface */
  --sand-200:          #F4EBDC;
  --sand-300:          #EFE0C9;
  --sand-400:          #EDDBBF;   /* flyer page background */
  --sand-500:          #E2D2B7;
  --sand-600:          #D3C0A1;
  --sand-700:          #B9A484;

  /* --- Mint ramp (the light bluish accent) --- */
  --mint-50:           #EFF7F4;
  --mint-100:          #DCEDE7;
  --mint-200:          #BFDCD2;
  --mint-300:          #99BEAD;   /* flyer secondary mint */
  --mint-400:          #7BB7A9;   /* brand mint */
  --mint-500:          #5AA394;
  --mint-600:          #33999A;   /* flyer deep teal */
  --mint-700:          #2A7C7D;

  /* --- Ink ramp --- */
  --ink-900:           #1B2026;
  --ink-800:           #23292F;
  --ink-700:           #2A3138;   /* flyer body ink */
  --ink-600:           #2C3239;
  --ink-500:           #414A53;
  --ink-400:           #5C6771;
  --ink-300:           #7C8792;
  --ink-200:           #A3ADB6;

  /* --- Semantic --- */
  --c-bg:              var(--sand-400);
  --c-surface:         var(--sand-100);
  --c-surface-2:       var(--sand-50);
  --c-surface-sunken:  var(--sand-300);
  --c-border:          rgba(44, 50, 57, .12);
  --c-border-strong:   rgba(44, 50, 57, .22);
  --c-text:            var(--ink-700);
  --c-text-muted:      var(--ink-400);
  --c-text-faint:      var(--ink-300);
  --c-accent:          var(--mint-600);
  --c-accent-quiet:    var(--mint-400);
  --c-on-accent:       #FFFFFF;

  /* --- Status --- */
  --c-ok:              #3F8F6B;
  --c-ok-bg:           #E4F1EA;
  --c-warn:            #B4823A;
  --c-warn-bg:         #F7EBD8;
  --c-danger:          #B4544A;
  --c-danger-bg:       #F7E4E1;
  --c-info:            var(--mint-700);
  --c-info-bg:         var(--mint-100);

  /* --- Sidebar (ink) --- */
  --nav-bg:            var(--ink-900);
  --nav-bg-2:          #171C21;
  --nav-text:          rgba(255, 255, 255, .68);
  --nav-text-strong:   #FFFFFF;
  --nav-hover:         rgba(255, 255, 255, .07);
  --nav-active:        rgba(123, 183, 169, .16);
  --nav-border:        rgba(255, 255, 255, .09);

  /* --- Typography --- */
  --font-sans:  "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Space Grotesk", var(--font-sans);
  --font-mono:  "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --fs-xs:   11px;
  --fs-sm:   12.5px;
  --fs-base: 14px;
  --fs-md:   15px;
  --fs-lg:   17px;
  --fs-xl:   21px;
  --fs-2xl:  27px;
  --fs-3xl:  34px;

  /* --- Space --- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;

  /* --- Radius --- */
  --r-sm: 6px;  --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-pill: 999px;

  /* --- Elevation (warm shadows, never neutral grey) --- */
  --sh-xs: 0 1px 2px rgba(44, 50, 57, .06);
  --sh-sm: 0 1px 2px rgba(44, 50, 57, .05), 0 2px 6px rgba(44, 50, 57, .05);
  --sh-md: 0 2px 4px rgba(44, 50, 57, .05), 0 8px 20px rgba(44, 50, 57, .07);
  --sh-lg: 0 8px 16px rgba(44, 50, 57, .07), 0 24px 48px rgba(44, 50, 57, .10);

  /* --- Layout --- */
  --nav-w:        256px;
  --nav-w-mini:   72px;
  --topbar-h:     60px;
  --content-max:  1440px;

  --ease: cubic-bezier(.4, 0, .2, 1);
}