/* =====================================================================
   AUVION — Colors & Type  (v3 · Light · Bone-primary)
   Marketing site + SaaS intro video. Default surface is warm off-white
   bone with restrained emerald accent. Champagne is a secondary metallic.
   Luxury · airy · glassy · fintech.
   Source of truth: Auvion_Brand_Concept_Spec.md
   ===================================================================== */

/* ---- Fonts (Google Fonts substitutions; flag for production) ------- */
/* Newsreader  → substitution for GT Sectra / Tiempos Headline / Editorial New */
/* Geist       → substitution for Söhne / Inter Display / Neue Haas Grotesk    */
@import url("https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,300;1,6..72,400&family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&display=swap");

:root {
  /* ===============================================================
     CORE PALETTE — per Brand Concept Spec §10
     Bone is primary surface. Emerald is the accent. Champagne is
     secondary metallic for premium tier mentions only. Onyx is
     used only for type and a few inverse moments.
     =============================================================== */
  --bone:       #F4F1EC;   /* Primary — backgrounds, surfaces */
  --onyx:       #0A0A0B;   /* Type, inverse moments */
  --emerald:    #1F4D3B;   /* Lead accent — CTAs, links, brand moments */
  --chrome:     #C8C9CB;   /* Borders, dividers, secondary UI */
  --graphite:   #2A2C2F;   /* Type on bone (alternate), inverse surfaces */
  --champagne:  #D9C9A8;   /* Reserved metallic — premium tier mention */

  /* ===============================================================
     BONE SCALE — the warm white axis. Site bg defaults to bone-50.
     =============================================================== */
  --bone-50:   #FBF9F5;     /* page bg — slightly cooler than bone */
  --bone-75:   #F8F5EE;
  --bone-100:  #F4F1EC;     /* primary bone — surfaces */
  --bone-150:  #EFEBE2;
  --bone-200:  #E9E4D9;     /* elevated surface */
  --bone-300:  #D6CFC0;     /* hairline */
  --bone-400:  #B0A892;
  --bone-500:  #837C68;

  /* Pure white surface (cards float ABOVE bone) */
  --paper:     #FFFFFF;
  --paper-translucent: rgba(255, 255, 255, 0.6);

  /* ===============================================================
     EMERALD SCALE — derived from #1F4D3B
     =============================================================== */
  --emerald-1000: #061812;
  --emerald-900:  #0C2A20;
  --emerald-800:  #143A2D;
  --emerald-700:  #1F4D3B;   /* primary emerald — CTAs */
  --emerald-600:  #2A6750;
  --emerald-500:  #388268;
  --emerald-400:  #4FA383;
  --emerald-300:  #82C6AB;
  --emerald-200:  #B5DECC;
  --emerald-100:  #DCEEE5;
  --emerald-50:   #EEF7F1;

  /* ===============================================================
     ONYX SCALE — used as type on bone, never as page bg
     =============================================================== */
  --onyx-1000: #050506;
  --onyx-950:  #0A0A0B;    /* primary text */
  --onyx-900:  #111114;
  --onyx-850:  #16171A;
  --onyx-800:  #1C1D20;
  --onyx-750:  #232428;
  --onyx-700:  #2A2C2F;    /* = graphite */
  --onyx-600:  #3A3D41;
  --onyx-500:  #4F5358;    /* secondary text */
  --onyx-400:  #6B6F75;    /* tertiary text */
  --onyx-300:  #8B8F95;    /* placeholder */
  --onyx-200:  #ABAFB4;
  --onyx-100:  #C8C9CB;    /* = chrome */

  /* ===============================================================
     CHAMPAGNE SCALE — secondary metallic
     =============================================================== */
  --champagne-700: #8C7848;
  --champagne-500: #BFA77C;
  --champagne-400: #D9C9A8;   /* primary highlight */
  --champagne-300: #E7DCC2;
  --champagne-100: #F4ECDB;

  /* ===============================================================
     CHROME — neutral mid-greys
     =============================================================== */
  --chrome-strong: #C8C9CB;
  --chrome-mid:    #9CA0A4;
  --chrome-soft:   #6F7378;

  /* ===============================================================
     SEMANTIC STATUS — restrained
     =============================================================== */
  --success:    #2A6750;
  --success-bg: rgba(56, 130, 104, 0.10);
  --warning:    #B07A1F;
  --warning-bg: rgba(176, 122, 31, 0.10);
  --danger:     #A93A2D;
  --danger-bg:  rgba(169, 58, 45, 0.10);

  /* ===============================================================
     SURFACE TOKENS — light-mode semantic aliases
     =============================================================== */
  --bg-page:        var(--bone-50);
  --bg-surface:     var(--bone-100);
  --bg-elevated:    var(--paper);
  --bg-inset:       var(--bone-200);

  /* Glass surfaces — defined for bone primary surface */
  --glass-bone:     rgba(255, 255, 255, 0.62);
  --glass-bone-hi:  rgba(255, 255, 255, 0.78);
  --glass-emerald:  rgba(238, 247, 241, 0.72);
  --glass-onyx:     rgba(22, 23, 26, 0.62);

  /* Borders — onyx at hairline opacities on bone */
  --border-subtle:  rgba(10, 10, 11, 0.05);
  --border-default: rgba(10, 10, 11, 0.08);
  --border-strong:  rgba(10, 10, 11, 0.14);
  --border-emerald: rgba(31, 77, 59, 0.22);
  --border-champagne: rgba(140, 120, 72, 0.24);

  /* Text on bone (DEFAULT) */
  --fg-1: #0A0A0B;          /* primary type */
  --fg-2: #3A3D41;          /* secondary type */
  --fg-3: #6B6F75;          /* tertiary type / captions */
  --fg-4: #8B8F95;          /* placeholder / disabled */
  --fg-emerald: #1F4D3B;    /* link / accent type */

  /* Text on onyx (inverse moments only) */
  --fg-on-onyx-1: #F4F1EC;
  --fg-on-onyx-2: #C8C9CB;
  --fg-on-onyx-3: #8B8F95;

  /* Brand aliases */
  --brand-primary:   var(--bone-100);
  --brand-accent:    var(--emerald-700);
  --brand-highlight: var(--champagne-400);

  /* ===============================================================
     TYPE — families
     =============================================================== */
  --font-display: "Newsreader", "GT Sectra", "Tiempos Headline", ui-serif, Georgia, serif;
  --font-body:    "Geist", "Söhne", "Inter Display", "Neue Haas Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:    "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale — editorial */
  --t-display-xl:  120px;
  --t-display-lg:  88px;
  --t-display-md:  64px;
  --t-display-sm:  48px;
  --t-h1:          40px;
  --t-h2:          28px;
  --t-h3:          22px;
  --t-h4:          17px;
  --t-body-lg:     19px;
  --t-body:        16px;
  --t-body-sm:     14px;
  --t-caption:     13px;
  --t-eyebrow:     11px;

  /* Line heights */
  --lh-display: 1.02;
  --lh-heading: 1.12;
  --lh-body:    1.55;
  --lh-tight:   1.3;

  /* Tracking */
  --track-display: -0.025em;
  --track-display-italic: -0.015em;
  --track-heading: -0.012em;
  --track-body:    -0.005em;
  --track-eyebrow:  0.16em;

  /* ===============================================================
     SPACING (4px base)
     =============================================================== */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  56px;
  --space-10: 72px;
  --space-11: 96px;
  --space-12: 128px;
  --space-13: 160px;
  --space-14: 200px;

  /* ===============================================================
     RADII — restrained
     =============================================================== */
  --r-xs:   3px;
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   16px;
  --r-xl:   22px;
  --r-2xl:  32px;
  --r-pill: 999px;

  /* ===============================================================
     SHADOWS — soft, ambient. On bone, shadows must be VERY soft and
     warm-tinted toward onyx (not blue-black like Material Design).
     =============================================================== */
  --shadow-xs: 0 1px 1px rgba(10, 10, 11, 0.04);
  --shadow-sm:
    0 1px 2px rgba(10, 10, 11, 0.04),
    0 2px 8px -2px rgba(10, 10, 11, 0.06);
  --shadow-md:
    0 4px 12px -3px rgba(10, 10, 11, 0.06),
    0 10px 30px -8px rgba(10, 10, 11, 0.08);
  --shadow-lg:
    0 12px 32px -8px rgba(10, 10, 11, 0.08),
    0 24px 64px -16px rgba(10, 10, 11, 0.10);
  --shadow-xl:
    0 32px 80px -20px rgba(10, 10, 11, 0.12),
    0 12px 32px -10px rgba(10, 10, 11, 0.08);
  --shadow-emerald: 0 0 0 1px rgba(31, 77, 59, 0.16),
                    0 14px 44px -16px rgba(31, 77, 59, 0.32);

  /* Inset highlight — keeps glassy edge on bone */
  --inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --inset-bottom:    inset 0 -1px 0 rgba(10, 10, 11, 0.04);

  /* Blur */
  --blur-sm: 8px;
  --blur-md: 20px;
  --blur-lg: 40px;

  /* Motion */
  --ease-out:       cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out:    cubic-bezier(0.6, 0.04, 0.3, 1);
  --ease-overshoot: cubic-bezier(0.34, 1.38, 0.5, 1);
  --dur-1: 120ms;
  --dur-2: 240ms;
  --dur-3: 420ms;
  --dur-4: 720ms;
}

/* ===================================================================
   SEMANTIC TYPE CLASSES
   =================================================================== */
.display-xl {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--t-display-xl);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  color: var(--fg-1);
  font-optical-sizing: auto;
}
.display-lg {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--t-display-lg);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  color: var(--fg-1);
  font-optical-sizing: auto;
}
.display-md {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--t-display-md);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  color: var(--fg-1);
  font-optical-sizing: auto;
}
.display-sm {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-display-sm);
  line-height: var(--lh-heading);
  letter-spacing: var(--track-display);
  color: var(--fg-1);
}
.display-italic {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  letter-spacing: var(--track-display-italic);
}
.h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-h1);
  line-height: var(--lh-heading);
  letter-spacing: var(--track-heading);
  color: var(--fg-1);
}
.h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--track-heading);
  color: var(--fg-1);
}
.h3 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--t-h3);
  line-height: var(--lh-heading);
  letter-spacing: var(--track-heading);
  color: var(--fg-1);
}
.body-lg {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--t-body-lg);
  line-height: var(--lh-body);
  letter-spacing: var(--track-body);
  color: var(--fg-2);
}
.body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--t-body);
  line-height: var(--lh-body);
  letter-spacing: var(--track-body);
  color: var(--fg-2);
}
.body-sm {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--t-body-sm);
  line-height: var(--lh-body);
  color: var(--fg-2);
}
.caption {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--t-caption);
  line-height: var(--lh-tight);
  color: var(--fg-3);
}
.eyebrow {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--t-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--fg-3);
}
.mono {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0;
}

.tnum, .money, .stat {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "ss01" 1;
}

.figure {
  font-family: var(--font-display);
  font-weight: 300;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.035em;
  line-height: 1;
}

/* ===================================================================
   UTILITY — bone + glass + emerald surfaces
   =================================================================== */

/* Default page surface — bone with restrained emerald wash */
.bone-canvas {
  background-color: var(--bone-50);
  background-image:
    radial-gradient(80% 50% at 0% 0%, rgba(31, 77, 59, 0.05), transparent 55%),
    radial-gradient(60% 40% at 100% 100%, rgba(217, 201, 168, 0.06), transparent 55%);
}

/* Glassy frosted card on bone */
.glass-card {
  background: var(--glass-bone-hi);
  backdrop-filter: blur(var(--blur-md)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--blur-md)) saturate(140%);
  border: 1px solid var(--border-default);
  box-shadow: var(--inset-highlight), var(--shadow-md);
}

/* Solid paper card */
.paper-card {
  background: var(--paper);
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow-sm);
}

/* Inverse onyx surface (for special sections only) */
.onyx-surface {
  background-color: var(--onyx-950);
  color: var(--fg-on-onyx-1);
  background-image:
    radial-gradient(80% 50% at 100% 0%, rgba(31, 77, 59, 0.18), transparent 55%);
}

/* Subtle hairline rule */
.chrome-rule {
  border-top: 1px solid var(--border-default);
}