/* ============================================================
   DriveX — Colors & Type  ·  V7 Design System
   Source of truth: student-app/src/styles/global.css (DriveX-App repo)
   Drop this file into any project to inherit the full DriveX token set.
   ============================================================ */

/* ---- Inter (Body) via Google Fonts ---- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ---- Aventa (Display) · self-hosted OTF, full family ----
   In practice the system uses 600 / 800 / 900 upright. The remaining
   weights + italics are wired for completeness. NOTE: brand rule says
   the em-accent is NEVER italic — italics are available but unused in UI. */
@font-face { font-family:'Aventa'; src:url('fonts/Aventa-Thin.otf') format('opentype');       font-weight:100; font-style:normal; font-display:swap; }
@font-face { font-family:'Aventa'; src:url('fonts/Aventa-ExtraLigh.otf') format('opentype');  font-weight:200; font-style:normal; font-display:swap; }
@font-face { font-family:'Aventa'; src:url('fonts/Aventa-Ligh.otf') format('opentype');       font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:'Aventa'; src:url('fonts/Aventa-Regular.otf') format('opentype');    font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Aventa'; src:url('fonts/Aventa-Medium.otf') format('opentype');     font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Aventa'; src:url('fonts/Aventa-SemiBold.otf') format('opentype');   font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Aventa'; src:url('fonts/Aventa-Bold.otf') format('opentype');       font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Aventa'; src:url('fonts/Aventa-ExtraBold.otf') format('opentype');  font-weight:800; font-style:normal; font-display:swap; }  /* DEFAULT for headlines */
@font-face { font-family:'Aventa'; src:url('fonts/Aventa-Black.otf') format('opentype');      font-weight:900; font-style:normal; font-display:swap; }  /* Hero numbers, accent display */

@font-face { font-family:'Aventa'; src:url('fonts/Aventa-ThinItallic.otf') format('opentype');      font-weight:100; font-style:italic; font-display:swap; }
@font-face { font-family:'Aventa'; src:url('fonts/Aventa-ExtraLightItallic.otf') format('opentype');font-weight:200; font-style:italic; font-display:swap; }
@font-face { font-family:'Aventa'; src:url('fonts/Aventa-LightItallic.otf') format('opentype');     font-weight:300; font-style:italic; font-display:swap; }
@font-face { font-family:'Aventa'; src:url('fonts/Aventa-RegularItallic.otf') format('opentype');   font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'Aventa'; src:url('fonts/Aventa-MediumItallic.otf') format('opentype');    font-weight:500; font-style:italic; font-display:swap; }
@font-face { font-family:'Aventa'; src:url('fonts/Aventa-SemiBoldItallic.otf') format('opentype');  font-weight:600; font-style:italic; font-display:swap; }
@font-face { font-family:'Aventa'; src:url('fonts/Aventa-BoldItallic.otf') format('opentype');      font-weight:700; font-style:italic; font-display:swap; }
@font-face { font-family:'Aventa'; src:url('fonts/Aventa-ExtraBoldItallic.otf') format('opentype'); font-weight:800; font-style:italic; font-display:swap; }
@font-face { font-family:'Aventa'; src:url('fonts/Aventa-BlackItallic.otf') format('opentype');     font-weight:900; font-style:italic; font-display:swap; }

/* ---- CM Geom (accent / numeric face) · self-hosted ----
   The CDM's accent typeface, for decorative & numeric use. */
@font-face { font-family:'CM Geom'; src:url('fonts/CMGeom-Regular.otf') format('opentype'); font-weight:400; font-style:normal; font-display:swap; }

:root {
  /* ===========================================================
     COLOR — Core Identity
     Black is an ACCENT, not a default. Honeysuckle is the hero.
     =========================================================== */
  --acadia:       #191C00;   /* Main "black" · brand / identity / entry. Never use #000. */
  --acadia-soft:  #262A08;   /* For gradients off Acadia */
  --honeysuckle:  #D8FF7C;   /* Signature color — the ONE most important thing on screen */
  --detail:       #B5533A;   /* Dusty Rose · notification dots, "urgent" */
  --bg:           #F3F3F1;   /* Page background · replaces white */

  /* ===========================================================
     COLOR — Honeysuckle Family
     =========================================================== */
  --hs-bg:     #EDF6D0;   /* Soft tinted surfaces (icon backgrounds) */
  --hs-subtle: #F5FBDF;   /* Hover / active for lighter cards */
  --hs-step1:  #C6E570;   /* Progress, status dot */
  --hs-deep:   #B8E04A;   /* Dashed borders, eyebrow, progress fill, light-title accent */

  /* ===========================================================
     COLOR — Grayscale (G-scale)
     g100 = standard border · g400 = secondary text · g500 = popup body text
     =========================================================== */
  --g50:  #FAFAF9;
  --g75:  #F5F5F3;
  --g100: #EAEAE8;
  --g150: #DDDDD9;
  --g200: #CCCCC7;
  --g300: #A8A89F;
  --g400: #7C7C74;
  --g500: #56564E;

  /* ===========================================================
     COLOR — Accent families (tags / banners)
     =========================================================== */
  --terracotta:      #8E3C28;   /* "Action required", warn banner, destructive */
  --terracotta-bg:   #F2D9CE;
  --terracotta-soft: #F7E8D6;
  --amber:           #8E3C28;   /* alias for offline / pending */
  --amber-bg:        #F2D9CE;
  --blue:            #3B82F6;   /* "Exam", informational, neutral */
  --blue-bg:         #EFF6FF;

  /* ===========================================================
     COLOR — Status
     =========================================================== */
  --color-success: #34c759;
  --color-warning: #ff9500;
  --color-danger:  #ff3b30;

  /* ===========================================================
     CDM BRAND REFERENCE — canonical values from the Corporate
     Design Manual v1.1 (Oct 2024, dobbl). Use these for print /
     brand work; the digital tokens above are the app's evolution.
     =========================================================== */
  --brand-acadia:       #191C00;  /* RGB 25/28/0   · CMYK 11/0/100/96 */
  --brand-honeysuckle:  #D8FF7C;  /* RGB 216/255/124 · CMYK 18/0/62/0 · PANTONE 372C */
  --brand-off-white:    #F1F7E4;  /* RGB 241/247/228 · CMYK 4/0/10/0 · body / surfaces */
  --brand-black:        #070707;  /* CMYK 0/0/0/97 · for long body copy in print */
  --brand-detail:       #EA4E2A;  /* RGB 234/78/42 · original accent (app digital uses #B5533A) */
  /* Steps = brightness (HSB-B) reductions of a hue, same chroma */
  --acadia-step1:       #101100;
  --acadia-step2:       #070700;
  --honeysuckle-step1:  #C6E570;
  --honeysuckle-step2:  #B0CC64;
  /* Color management: RGB → sRGB IEC61966-2-1 · CMYK → Coated FOGRA39 */

  /* ===========================================================
     COLOR — Navigation
     =========================================================== */
  --nav-inactive:     #B5B5AD;
  --color-nav-bg:     #ffffff;
  --color-nav-active: var(--acadia);

  /* ===========================================================
     COLOR — Semantic text aliases
     =========================================================== */
  --color-bg:             var(--bg);
  --color-surface:        #ffffff;
  --color-text:           var(--acadia);
  --color-text-secondary: var(--g400);
  --color-text-tertiary:  var(--g300);
  --color-border:         var(--g100);
  --color-divider:        var(--g100);

  /* ===========================================================
     TYPOGRAPHY — Families
     Aventa (Display, 600/800/900) for headlines, numbers, short labels.
     Inter (400–800) for body, inputs, list rows. Mix no other typeface.
     =========================================================== */
  --font-family:  'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display',
                  'SF Pro Text', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Aventa', 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display',
                  'Segoe UI', Roboto, sans-serif;
  --font-accent:  'CM Geom', 'Aventa', system-ui, sans-serif;   /* decorative / numeric */

  /* ---- Type scale ---- */
  --font-size-xs:   0.6875rem;   /* 11px — eyebrow, status chip */
  --font-size-sm:   0.8125rem;   /* 13px — body small */
  --font-size-base: 0.9375rem;   /* 15px — body default */
  --font-size-lg:   1.0625rem;   /* 17px — sheet / popup title */
  --font-size-xl:   1.25rem;     /* 20px */
  --font-size-2xl:  1.625rem;    /* 26px — page title */
  --font-size-3xl:  2rem;        /* 32px — hero */

  /* ---- Weights ---- */
  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;
  --font-weight-black:    800;   /* Aventa display default */
  /* 900 is loaded straight off the Aventa file — no token */

  /* ===========================================================
     SPACING & LAYOUT
     =========================================================== */
  --nav-height:    64px;
  --header-height: 56px;
  --safe-area-top:    env(safe-area-inset-top, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --bottom-nav-clearance: calc(var(--nav-height) + 28px + var(--safe-area-bottom));

  /* ===========================================================
     BORDER RADIUS
     =========================================================== */
  --radius-sm:   10px;   /* small buttons, icon buttons */
  --radius-md:   14px;   /* standard card, lesson row */
  --radius-lg:   18px;   /* larger list items */
  --radius-xl:   24px;   /* hero cards, sheets, banners */
  --radius-full: 9999px; /* pills */
  /* Top hero block also uses: border-radius: 0 0 32px 32px */

  /* ===========================================================
     SHADOWS — always COLORED, never neutral black (except sheets/popups)
     =========================================================== */
  --shadow-hs:        0 10px 28px rgba(184, 224, 74, 0.35);  /* honeysuckle card */
  --shadow-hs-active: 0 14px 34px rgba(184, 224, 74, 0.50);  /* honeysuckle hover */
  --shadow-hs-pill:   0 4px 12px rgba(184, 224, 74, 0.35);   /* mini CTA / pill */
  --shadow-acadia:    0 14px 32px rgba(25, 28, 0, 0.26);     /* dark hero / banner */
  --shadow-nav:       0 -4px 16px rgba(25, 28, 0, 0.18);     /* bottom nav */
  --shadow-terracotta:0 6px 18px rgba(142, 60, 40, 0.10);    /* terracotta banner */
  --shadow-sheet:     0 -12px 40px rgba(0, 0, 0, 0.18);      /* bottom sheet */
  --shadow-popup:     0 20px 50px rgba(0, 0, 0, 0.30);       /* confirm popup */
}

/* ============================================================
   SEMANTIC TYPE PRIMITIVES
   Optional helpers — class-based equivalents of the in-app patterns.
   ============================================================ */
.dx-eyebrow {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--hs-deep);
}
.dx-h1 {            /* Page title (light header) */
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -0.8px;
  line-height: 1.05;
  color: var(--acadia);
}
.dx-h1 em { font-style: normal; color: var(--hs-deep); }   /* accent word — NEVER italic */

.dx-hero-title {    /* Dark hero title */
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 34px;
  letter-spacing: -1px;
  line-height: 1.05;
  color: #fff;
}
.dx-hero-title em { font-style: normal; color: var(--honeysuckle); }

.dx-h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.3px;
  color: var(--acadia);
}
.dx-section-label {  /* uppercase mini section header */
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--acadia);
}
.dx-body {
  font-family: var(--font-family);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--acadia);
}
.dx-body-sm {
  font-family: var(--font-family);
  font-size: 13px;
  font-weight: 500;
  color: var(--g500);
}
.dx-num {            /* big display number (Aventa Black) */
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -0.8px;
  line-height: 1;
}