/* ==========================================================================
   01-TOKENS.CSS - NEOMETIS Design System
   All visual values should derive from these custom properties.
   ========================================================================== */

@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/cormorant-garamond-300.ttf') format('truetype');
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/cormorant-garamond-400.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/cormorant-garamond-300-italic.ttf') format('truetype');
  font-style: italic;
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/cormorant-garamond-400-italic.ttf') format('truetype');
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Exo 2';
  src: url('../fonts/exo-2-200.ttf') format('truetype');
  font-style: normal;
  font-weight: 200;
  font-display: swap;
}

@font-face {
  font-family: 'Exo 2';
  src: url('../fonts/exo-2-300.ttf') format('truetype');
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: 'Exo 2';
  src: url('../fonts/exo-2-400.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Exo 2';
  src: url('../fonts/exo-2-500.ttf') format('truetype');
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: 'Exo 2';
  src: url('../fonts/exo-2-600.ttf') format('truetype');
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: 'Exo 2';
  src: url('../fonts/exo-2-700.ttf') format('truetype');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {

  /* -----------------------------------------------------------------------
     OFFICIAL PALETTE - Approved homepage reference
     ----------------------------------------------------------------------- */

  --nm-dark:         #013743;
  --nm-primary:      #004A5B;
  --nm-primary-b:    #1A7376;
  --nm-accent:       #20BCC2;
  --nm-secondary:    #D4C1B2;
  --nm-amber:        #E39051;
  --nm-amber-dark:   #C97A3A;
  --nm-bg-light:     #F3F9FA;
  --nm-text-para:    #4E6671;

  /* Dark surface system from the homepage prototype */
  --surface-0: #010F14;
  --surface-1: #011E28;
  --surface-2: #01293A;
  --surface-3: #013040;
  --surface-4: #023B4C;

  /* -----------------------------------------------------------------------
     PRIMITIVE PALETTE - Keep the current variable contract
     ----------------------------------------------------------------------- */

  /* Teal */
  --clr-teal-50:  #e8fafb;
  --clr-teal-100: #c5f1f4;
  --clr-teal-200: #8ee4e8;
  --clr-teal-300: #52d2d9;
  --clr-teal-400: var(--nm-accent);
  --clr-teal-500: var(--nm-primary-b);
  --clr-teal-600: var(--nm-primary);
  --clr-teal-700: var(--nm-dark);
  --clr-teal-800: var(--surface-1);
  --clr-teal-900: var(--surface-0);

  /* Orange */
  --clr-orange-50:  #fdf3e8;
  --clr-orange-100: #fae3c5;
  --clr-orange-200: #f4c88d;
  --clr-orange-300: #eda762;
  --clr-orange-400: var(--nm-amber);
  --clr-orange-500: var(--nm-amber-dark);
  --clr-orange-600: #b8632a;
  --clr-orange-700: #924d1e;
  --clr-orange-800: #6d3815;
  --clr-orange-900: #47240c;

  /* Dark neutrals remapped to the brand atmosphere */
  --clr-neutral-950: #010a0f;
  --clr-neutral-900: var(--surface-0);
  --clr-neutral-880: #01151b;
  --clr-neutral-850: var(--surface-1);
  --clr-neutral-800: var(--surface-2);
  --clr-neutral-750: var(--surface-3);
  --clr-neutral-700: var(--surface-4);
  --clr-neutral-600: #355b67;
  --clr-neutral-500: var(--nm-text-para);
  --clr-neutral-400: #6d808a;
  --clr-neutral-300: #9baab3;
  --clr-neutral-200: #b9c6cc;
  --clr-neutral-150: var(--nm-secondary);
  --clr-neutral-100: #e6e0da;
  --clr-neutral-50:  var(--nm-bg-light);
  --clr-neutral-0:   #ffffff;

  /* -----------------------------------------------------------------------
     SEMANTIC COLOR TOKENS
     ----------------------------------------------------------------------- */

  /* Backgrounds */
  --color-bg:              var(--surface-0);
  --color-bg-deep:         var(--clr-neutral-950);
  --color-bg-surface:      var(--surface-1);
  --color-bg-elevated:     var(--surface-2);
  --color-bg-overlay:      rgba(1, 30, 40, 0.92);

  /* Text */
  --color-text:            var(--nm-bg-light);
  --color-text-secondary:  var(--nm-secondary);
  --color-text-muted:      var(--clr-neutral-300);
  --color-text-subtle:     var(--clr-neutral-400);
  --color-text-disabled:   var(--clr-neutral-500);
  --color-text-inverse:    var(--nm-dark);
  --text-bright:           var(--color-text);
  --text-primary:          var(--color-text-secondary);
  --text-secondary:        var(--color-text-muted);
  --text-muted:            var(--color-text-subtle);
  --text-inverse:          var(--color-text-inverse);

  /* Borders */
  --color-border:          rgba(32, 188, 194, 0.10);
  --color-border-soft:     rgba(32, 188, 194, 0.06);
  --color-border-medium:   rgba(32, 188, 194, 0.22);
  --color-border-strong:   rgba(32, 188, 194, 0.42);
  --color-border-focus:    var(--nm-accent);
  --border-subtle:         var(--color-border);
  --border-mid:            var(--color-border-medium);
  --border-bright:         var(--color-border-strong);
  --border-amber:          rgba(227, 144, 81, 0.35);
  --border-glow:           rgba(32, 188, 194, 0.65);

  /* Brand */
  --color-brand:           var(--nm-accent);
  --color-brand-light:     var(--clr-teal-300);
  --color-brand-dark:      var(--nm-primary-b);
  --color-brand-glow:      rgba(32, 188, 194, 0.18);
  --color-brand-subtle:    rgba(32, 188, 194, 0.08);

  /* Accent */
  --color-accent:          var(--nm-amber);
  --color-accent-light:    var(--clr-orange-300);
  --color-accent-dark:     var(--nm-amber-dark);
  --color-accent-glow:     rgba(227, 144, 81, 0.25);
  --color-accent-subtle:   rgba(227, 144, 81, 0.08);
  --gradient-cta:          linear-gradient(105deg, var(--nm-amber) 0%, var(--nm-amber-dark) 100%);
  --gradient-teal:         linear-gradient(105deg, var(--nm-accent) 0%, var(--nm-primary) 100%);
  --gradient-dark:         linear-gradient(170deg, #010f14 0%, #011e28 50%, #01293a 100%);
  --gradient-hero:         radial-gradient(ellipse 80% 60% at 50% 110%, rgba(26, 115, 118, 0.45) 0%, transparent 60%),
                           radial-gradient(ellipse 50% 40% at 20% 80%, rgba(1, 55, 67, 0.7) 0%, transparent 55%),
                           radial-gradient(ellipse 40% 30% at 80% 15%, rgba(32, 188, 194, 0.06) 0%, transparent 55%),
                           linear-gradient(170deg, #010f14 0%, #011e28 50%, #01293a 100%);

  /* Functional states */
  --color-success:         #3ecf8e;
  --color-success-subtle:  rgba(62, 207, 142, 0.10);
  --color-warning:         #fbbf24;
  --color-warning-subtle:  rgba(251, 191, 36, 0.10);
  --color-error:           #f87171;
  --color-error-subtle:    rgba(248, 113, 113, 0.10);
  --color-info:            var(--nm-accent);
  --color-info-subtle:     var(--color-brand-subtle);

  /* -----------------------------------------------------------------------
     TYPOGRAPHY - Families
     ----------------------------------------------------------------------- */

  --font-display:  'Cormorant Garamond', Georgia, serif;
  --font-body:     'Exo 2', Arial, sans-serif;
  --font-sans:     var(--font-body);
  --font-mono:     var(--font-body);

  /* -----------------------------------------------------------------------
     TYPOGRAPHY - Modular scale
     ----------------------------------------------------------------------- */

  --type-ratio: 1.25;
  --type-base-desktop: 1rem;
  --type-base-mobile: 0.875rem;
  --type-base: var(--type-base-desktop);

  --type-step--2: calc(var(--type-base) / var(--type-ratio) / var(--type-ratio));
  --type-step--1: calc(var(--type-base) / var(--type-ratio));
  --type-step-0:  var(--type-base);
  --type-step-1:  calc(var(--type-base) * var(--type-ratio));
  --type-step-2:  calc(var(--type-base) * var(--type-ratio) * var(--type-ratio));
  --type-step-3:  calc(var(--type-base) * var(--type-ratio) * var(--type-ratio) * var(--type-ratio));
  --type-step-4:  calc(var(--type-base) * var(--type-ratio) * var(--type-ratio) * var(--type-ratio) * var(--type-ratio));
  --type-step-5:  calc(var(--type-base) * var(--type-ratio) * var(--type-ratio) * var(--type-ratio) * var(--type-ratio) * var(--type-ratio));
  --type-step-6:  calc(var(--type-base) * var(--type-ratio) * var(--type-ratio) * var(--type-ratio) * var(--type-ratio) * var(--type-ratio) * var(--type-ratio));
  --type-step-7:  calc(var(--type-base) * var(--type-ratio) * var(--type-ratio) * var(--type-ratio) * var(--type-ratio) * var(--type-ratio) * var(--type-ratio) * var(--type-ratio));
  --type-step-8:  calc(var(--type-base) * var(--type-ratio) * var(--type-ratio) * var(--type-ratio) * var(--type-ratio) * var(--type-ratio) * var(--type-ratio) * var(--type-ratio) * var(--type-ratio));

  --text-2xs:  var(--type-step--2);
  --text-xs:   var(--type-step--1);
  --text-sm:   var(--type-step--1);
  --text-base: var(--type-step-0);
  --text-md:   var(--type-step-1);
  --text-lg:   var(--type-step-2);
  --text-xl:   var(--type-step-3);
  --text-2xl:  var(--type-step-4);
  --text-3xl:  var(--type-step-5);
  --text-4xl:  var(--type-step-6);
  --text-5xl:  var(--type-step-7);
  --text-6xl:  var(--type-step-8);
  --text-display: var(--type-step-7);

  --text-eyebrow:   var(--text-xs);
  --text-label:     var(--text-xs);
  --text-caption:   var(--text-sm);
  --text-body:      var(--text-base);
  --text-body-lg:   var(--text-md);
  --text-h6:        var(--text-md);
  --text-h5:        var(--text-lg);
  --text-h4:        var(--text-xl);
  --text-h3:        var(--text-2xl);
  --text-h2:        var(--text-4xl);
  --text-h1:        var(--text-5xl);
  --text-hero:      var(--text-display);

  /* -----------------------------------------------------------------------
     TYPOGRAPHY - Weights
     ----------------------------------------------------------------------- */

  --fw-light:     300;
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;

  /* -----------------------------------------------------------------------
     TYPOGRAPHY - Line height
     ----------------------------------------------------------------------- */

  --lh-tight:    1.1;
  --lh-snug:     1.25;
  --lh-normal:   1.5;
  --lh-relaxed:  1.65;
  --lh-loose:    1.8;
  --lh-display:  0.95;

  /* -----------------------------------------------------------------------
     TYPOGRAPHY - Letter spacing
     ----------------------------------------------------------------------- */

  --ls-tightest: -0.05em;
  --ls-tighter:  -0.025em;
  --ls-tight:    -0.01em;
  --ls-normal:   0em;
  --ls-wide:     0.04em;
  --ls-wider:    0.08em;
  --ls-widest:   0.14em;
  --ls-extreme:  0.22em;

  /* -----------------------------------------------------------------------
     SPACING
     ----------------------------------------------------------------------- */

  --space-px:  1px;
  --space-0:   0;
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-7:   1.75rem;
  --space-8:   2rem;
  --space-9:   2.25rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-14:  3.5rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;
  --space-28:  7rem;
  --space-32:  8rem;
  --space-40:  10rem;
  --space-48:  12rem;
  --space-56:  14rem;
  --space-64:  16rem;

  --section-gap:       clamp(4rem, 8vw, 8rem);
  --section-gap-sm:    clamp(2.5rem, 5vw, 5rem);
  --section-gap-lg:    clamp(6rem, 12vw, 12rem);

  /* -----------------------------------------------------------------------
     LAYOUT
     ----------------------------------------------------------------------- */

  --container-max:    1440px;
  --container-sm:     860px;
  --container-lg:     1600px;
  --shell-max:        var(--container-max);
  --shell-padding:    clamp(1rem, 5vw, 4rem);
  --shell-padding-sm: clamp(1rem, 3vw, 2rem);

  --grid-cols:    12;
  --grid-gap:     clamp(1rem, 2vw, 1.5rem);
  --grid-gap-sm:  var(--space-4);
  --grid-gap-lg:  var(--space-8);

  /* -----------------------------------------------------------------------
     RADIUS
     ----------------------------------------------------------------------- */

  --radius-none:  0;
  --radius-xs:    0.125rem;
  --radius-sm:    0.125rem;
  --radius-base:  0.25rem;
  --radius-md:    0.375rem;
  --radius-lg:    0.5rem;
  --radius-xl:    0.75rem;
  --radius-2xl:   1rem;
  --radius-3xl:   1.5rem;
  --radius-full:  9999px;

  --radius-btn:     var(--radius-sm);
  --radius-card:    var(--radius-base);
  --radius-badge:   var(--radius-full);
  --radius-input:   var(--radius-base);
  --radius-modal:   var(--radius-lg);
  --radius-tooltip: var(--radius-sm);

  /* -----------------------------------------------------------------------
     SHADOWS
     ----------------------------------------------------------------------- */

  --shadow-none: none;
  --shadow-xs:   0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm:   0 2px 4px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md:   0 4px 12px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-lg:   0 8px 24px rgba(0, 0, 0, 0.6), 0 4px 8px rgba(0, 0, 0, 0.3);
  --shadow-xl:   0 16px 48px rgba(0, 0, 0, 0.7), 0 8px 16px rgba(0, 0, 0, 0.4);
  --shadow-2xl:  0 32px 80px rgba(0, 0, 0, 0.8);

  --shadow-brand-sm:  0 0 12px rgba(32, 188, 194, 0.18);
  --shadow-brand-md:  0 0 24px rgba(32, 188, 194, 0.24), 0 0 8px rgba(32, 188, 194, 0.14);
  --shadow-brand-lg:  0 0 48px rgba(32, 188, 194, 0.30), 0 0 16px rgba(32, 188, 194, 0.18);
  --shadow-accent-sm: 0 0 12px rgba(227, 144, 81, 0.20);
  --shadow-accent-md: 0 0 24px rgba(227, 144, 81, 0.25), 0 0 8px rgba(227, 144, 81, 0.15);
  --shadow-teal:      var(--shadow-brand-md);
  --shadow-amber:     0 8px 24px rgba(227, 144, 81, 0.25);
  --shadow-amber-lg:  0 16px 40px rgba(227, 144, 81, 0.35);

  --shadow-card:  var(--shadow-md);
  --shadow-nav:   0 1px 0 var(--color-border), 0 4px 20px rgba(0, 0, 0, 0.4);
  --shadow-modal: var(--shadow-xl);

  /* -----------------------------------------------------------------------
     Z-INDEX
     ----------------------------------------------------------------------- */

  --z-below:      -1;
  --z-base:        0;
  --z-raised:     10;
  --z-above:      var(--z-raised);
  --z-dropdown:   100;
  --z-sticky:     200;
  --z-nav:        var(--z-sticky);
  --z-overlay:    300;
  --z-modal:      400;
  --z-toast:      500;
  --z-cursor:     9000;
  --z-max:        9999;

  /* -----------------------------------------------------------------------
     TRANSITIONS
     ----------------------------------------------------------------------- */

  --ease-in:         cubic-bezier(0.4, 0, 1, 1);
  --ease-out:        cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out:     cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth:     cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-sharp:      cubic-bezier(0.12, 0, 0.39, 0);

  --duration-instant: 50ms;
  --duration-fast:    120ms;
  --duration-normal:  200ms;
  --duration-slow:    350ms;
  --duration-slower:  500ms;
  --duration-glacial: 800ms;
  --dur-fast:         var(--duration-fast);
  --dur-base:         var(--duration-normal);
  --dur-slow:         var(--duration-slow);
  --dur-slowest:      var(--duration-slower);

  --transition-base:      all var(--duration-normal) var(--ease-out);
  --transition-color:     color var(--duration-fast) var(--ease-out),
                          background-color var(--duration-fast) var(--ease-out),
                          border-color var(--duration-fast) var(--ease-out);
  --transition-opacity:   opacity var(--duration-normal) var(--ease-out);
  --transition-shadow:    box-shadow var(--duration-normal) var(--ease-out);
  --transition-transform: transform var(--duration-normal) var(--ease-out);
  --transition-fast:      var(--duration-fast) var(--ease-out);
  --transition-slow:      var(--duration-slow) var(--ease-in-out);

  /* -----------------------------------------------------------------------
     COMPONENT TOKENS
     ----------------------------------------------------------------------- */

  --btn-height-sm:    2rem;
  --btn-height-md:    2.5rem;
  --btn-height-lg:    3rem;
  --btn-height-xl:    3.5rem;
  --btn-px-sm:        var(--space-3);
  --btn-px-md:        var(--space-5);
  --btn-px-lg:        var(--space-6);
  --btn-px-xl:        var(--space-8);
  --btn-gap:          var(--space-2);
  --btn-font-sm:      var(--text-xs);
  --btn-font-md:      var(--text-sm);
  --btn-font-lg:      var(--text-sm);
  --btn-font-xl:      var(--text-base);
  --btn-fw:           var(--fw-medium);
  --btn-ls:           var(--ls-wide);
  --btn-radius:       var(--radius-btn);
  --btn-icon-size:    1em;
  --btn-icon-sm:      1rem;
  --btn-icon-md:      1.25rem;
  --btn-icon-lg:      1.375rem;
  --btn-icon-xl:      1.5rem;
  --btn-icon-stroke:  2.4;
  --btn-height-nav:   var(--btn-height-sm);
  --btn-px-nav:       var(--space-4);
  --btn-font-nav:     var(--btn-font-sm);
  --btn-icon-nav:     var(--btn-icon-sm);
  --btn-lift-hover:   -3px;
  --btn-shadow-primary:    0 12px 28px rgba(227, 144, 81, 0.22);
  --btn-shadow-primary-sm: 0 6px 18px rgba(227, 144, 81, 0.18);
  --btn-shine-duration:    650ms;
  --btn-h-sm:         var(--btn-height-sm);
  --btn-h-md:         var(--btn-height-md);
  --btn-h-lg:         var(--btn-height-lg);
  --btn-h-xl:         var(--btn-height-xl);

  --card-padding:      var(--space-6);
  --card-padding-sm:   var(--space-4);
  --card-padding-lg:   var(--space-8);
  --card-gap:          var(--space-4);
  --card-radius:       var(--radius-card);
  --card-border-color: rgba(32, 188, 194, 0.18);
  --card-border-hover: rgba(32, 188, 194, 0.34);
  --card-border:       1px solid var(--card-border-color);
  --card-bg:           var(--color-bg-surface);
  --card-title-font:   var(--font-display);
  --card-title-size:   var(--text-lg);
  --card-title-weight: var(--fw-medium);
  --card-title-featured-size: var(--text-xl);
  --card-title-compact-size:  var(--text-lg);
  --card-excerpt-font: var(--font-body);
  --card-excerpt-size: var(--text-base);
  --card-pill-min-h:   1.25rem;
  --card-pill-py:      0.03rem;
  --card-pill-px:      0.45rem;
  --card-pill-font:    var(--text-2xs);
  --card-pill-lh:      var(--lh-tight);
  --card-pill-ls:      var(--ls-wide);

  --nav-height:        4.5rem;
  --nav-height-scroll: 3.5rem;
  --nav-bg:            rgba(1, 30, 40, 0.88);
  --nav-blur:          16px;
  --glass-blur:        var(--nav-blur);
  --nav-h:             var(--nav-height);
  --nav-h-sm:          var(--nav-height-scroll);
  --megamenu-width:    560px;

  --drawer-width:      min(380px, 92vw);
  --platform-color:    var(--color-brand);

  --input-height:      var(--btn-height-md);
  --input-px:          var(--space-4);
  --input-bg:          var(--color-bg-elevated);
  --input-border:      1px solid var(--color-border-medium);
  --input-radius:      var(--radius-input);

  --scroll-line-height: 3rem;
  --hero-min-height:    100svh;
  --section-pad-y:      var(--section-gap);
  --section-pad-x:      var(--shell-padding);
  --section-label-line-w: 2rem;
  --ticker-duration:    40s;

  --corner-size: 10px;
  --corner-border-w: 1px;
  --nm-admin-bar-offset: 0px;
}

@media (max-width: 639px) {
  :root {
    --type-base: var(--type-base-mobile);
    --text-h1:   var(--type-step-5);
    --text-h2:   var(--type-step-4);
    --text-h3:   var(--type-step-3);
    --text-hero: var(--type-step-6);
  }
}

body.admin-bar {
  --nm-admin-bar-offset: 32px;
}

@media (max-width: 782px) {
  body.admin-bar {
    --nm-admin-bar-offset: 46px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast:      0ms;
    --duration-normal:    0ms;
    --duration-slow:      0ms;
    --duration-slower:    0ms;
    --duration-glacial:   0ms;
    --transition-base:    none;
    --transition-color:   none;
    --transition-opacity: none;
    --transition-shadow:  none;
    --transition-transform: none;
  }
}