/* ==========================================================================
   MAXILLA — Design Tokens
   Palette sampled directly from the Oral & Maxillofacial Surgeon logo mark.
   Teal/navy = the surgical identity.  Champagne = the aesthetic identity.
   ========================================================================== */

:root {
  /* --- Brand: surgical (from logo gradient) --- */
  --ink:         #04121C;
  --ink-2:       #071E2E;
  --navy:        #0D2E4C;
  --navy-2:      #103A5E;
  --teal-900:    #08475E;
  --teal-800:    #0A5C77;
  --teal-700:    #0E7490;
  --teal-600:    #1497B2;
  --teal-500:    #22B5C9;   /* primary brand cyan */
  --teal-400:    #45C9D9;
  --teal-300:    #7ADDE8;
  --teal-200:    #B4EEF4;
  --teal-100:    #DFF7FA;
  --teal-50:     #F1FCFD;

  /* --- Brand: aesthetic --- */
  --champagne-700: #A9764A;
  --champagne-500: #D8A87C;
  --champagne-400: #E5BF9A;
  --champagne-200: #F4E2CE;
  --champagne-100: #FBF3EA;

  /* --- Neutrals --- */
  --white:  #FFFFFF;
  --paper:  #F7FAFB;
  --mist:   #EDF3F5;
  --line:   #DCE7EB;
  --slate-400: #8FA5B0;
  --slate-500: #6B8494;
  --slate-600: #4C6675;
  --slate-700: #33505F;
  --slate-800: #1E3A48;

  /* --- Semantic --- */
  --bg:            var(--white);
  --bg-alt:        var(--paper);
  --bg-dark:       var(--ink);
  --text:          var(--slate-800);
  --text-muted:    var(--slate-500);
  --text-invert:   #EAF6F9;
  --text-invert-muted: rgba(234, 246, 249, .74);
  --border:        var(--line);
  --border-dark:   rgba(122, 221, 232, .16);

  /* --- Gradients --- */
  --grad-brand:   linear-gradient(135deg, var(--navy) 0%, var(--teal-700) 48%, var(--teal-400) 100%);
  --grad-brand-r: linear-gradient(135deg, var(--teal-400) 0%, var(--teal-700) 52%, var(--navy) 100%);
  --grad-deep:    linear-gradient(165deg, #04121C 0%, #072435 42%, #08475E 100%);
  --grad-aesth:   linear-gradient(135deg, var(--champagne-700) 0%, var(--champagne-500) 55%, var(--champagne-200) 100%);
  --grad-text:    linear-gradient(100deg, var(--navy) 0%, var(--teal-600) 45%, var(--teal-400) 100%);
  --grad-text-inv:linear-gradient(100deg, #FFFFFF 0%, var(--teal-300) 55%, var(--teal-500) 100%);
  --grad-sheen:   linear-gradient(115deg, transparent 30%, rgba(255,255,255,.42) 48%, transparent 62%);

  /* --- Glass --- */
  --glass-light: rgba(255, 255, 255, .68);
  --glass-dark:  rgba(7, 30, 46, .55);
  --glass-brd-l: rgba(255, 255, 255, .55);
  --glass-brd-d: rgba(122, 221, 232, .18);

  /* --- Type --- */
  --font-display: 'Outfit', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif:   'Instrument Serif', Georgia, 'Times New Roman', serif;

  /* Fluid type scale — 360px → 1600px viewport */
  --fs-xs:   clamp(.72rem,  .68rem + .18vw,  .82rem);
  --fs-sm:   clamp(.82rem,  .78rem + .20vw,  .94rem);
  --fs-base: clamp(.95rem,  .90rem + .26vw, 1.08rem);
  --fs-md:   clamp(1.05rem, .98rem + .36vw, 1.25rem);
  --fs-lg:   clamp(1.25rem, 1.10rem + .70vw, 1.75rem);
  --fs-xl:   clamp(1.60rem, 1.30rem + 1.40vw, 2.60rem);
  --fs-2xl:  clamp(2.10rem, 1.55rem + 2.55vw, 4.00rem);
  --fs-3xl:  clamp(2.70rem, 1.70rem + 4.40vw, 5.60rem);
  --fs-4xl:  clamp(2.65rem, 1.45rem + 4.60vw, 5.20rem);

  --lh-tight: 1.02;
  --lh-snug:  1.16;
  --lh-base:  1.68;

  --track-tight: -.035em;
  --track-wide:  .16em;

  /* --- Space --- */
  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4rem;
  --sp-9: 6rem;    --sp-10: 8rem;
  --section-y: clamp(4.5rem, 3rem + 7vw, 9.5rem);
  --gutter:    clamp(1.15rem, .6rem + 2.6vw, 3rem);
  --maxw:      1320px;
  --maxw-text: 68ch;

  /* --- Radii --- */
  --r-xs: 6px;  --r-sm: 10px;  --r-md: 16px;
  --r-lg: 24px; --r-xl: 34px;  --r-2xl: 48px; --r-pill: 999px;

  /* --- Shadow --- */
  --sh-xs: 0 1px 2px rgba(13, 46, 76, .06);
  --sh-sm: 0 2px 8px rgba(13, 46, 76, .07), 0 1px 2px rgba(13, 46, 76, .05);
  --sh-md: 0 10px 28px -8px rgba(13, 46, 76, .16), 0 2px 8px rgba(13, 46, 76, .06);
  --sh-lg: 0 26px 60px -18px rgba(13, 46, 76, .26), 0 6px 18px rgba(13, 46, 76, .08);
  --sh-xl: 0 46px 90px -28px rgba(8, 40, 66, .40), 0 10px 28px rgba(13, 46, 76, .10);
  --sh-teal: 0 18px 44px -14px rgba(20, 151, 178, .52);
  --sh-inner-hi: inset 0 1px 0 rgba(255,255,255,.6);

  /* --- Motion --- */
  --ease-out:   cubic-bezier(.16, 1, .3, 1);
  --ease-inout: cubic-bezier(.65, 0, .35, 1);
  --ease-spring:cubic-bezier(.34, 1.56, .64, 1);
  --t-fast: .22s;
  --t-med:  .45s;
  --t-slow: .9s;

  --z-bg: 0; --z-base: 1; --z-raise: 10; --z-nav: 100;
  --z-drawer: 200; --z-cursor: 900; --z-loader: 1000;

  --nav-h: 78px;
}

@media (max-width: 860px) { :root { --nav-h: 66px; } }