/* ============================================================================
   AEDIL — Colors & Type
   Single source of truth for the AEDIL brand system.
   Values sourced from: PPTX theme (AEDIL_Colors_new) + Brand Guide PDF v5.
   ============================================================================ */

/* ------------------------------- Fonts ---------------------------------- */
/* Primary: Manrope — headlines, interface-led communication, structured brand
   messaging. Clean proportions support AEDIL's industrial/software character.
   Secondary: IBM Plex Sans — whitepaper, system descriptions, diagrams,
   captions, technical reading. Institutional technology tone.               */

/* google-fonts @import removed — self-hosted (DSGVO) */

:root {
  /* ============ Color — Brand / Accent (Industrial Yellow) ============== */
  /* The yellow is AEDIL's primary brand signal — highlights, key UI
     elements, visual emphasis. Single accent — do NOT introduce new hues. */
  --aedil-yellow-900: #7A5C03;   /* deep ochre, over-light text on yellow */
  --aedil-yellow-700: #B88A05;   /* rich gold, hover/press on yellow      */
  --aedil-yellow-500: #F2B707;   /* THE AEDIL yellow — primary accent     */
  --aedil-yellow-300: #F7CF4A;   /* soft gold, subtle highlight           */
  --aedil-yellow-100: #FBE8A5;   /* pale gold, wash / backgrounds         */

  /* PPTX theme also uses #F2B80F occasionally (gradient end); keep the
     guide value #F2B707 as canonical. */
  --aedil-yellow: var(--aedil-yellow-500);

  /* ============ Color — Neutral Grayscale =============================== */
  /* Structure, typography, surfaces. Together with yellow, the palette
     feels "modern, technical, highly readable".                           */
  --aedil-ink-900: #0D0D0D;      /* near-black (guide primary black)      */
  --aedil-ink-800: #1A1A1A;      /* deck background dark                  */
  --aedil-ink-700: #262626;      /* elevated dark surface                 */
  --aedil-ink-600: #343434;      /* dark line / divider                   */
  --aedil-ink-500: #656567;      /* muted text on dark                    */
  --aedil-ink-400: #9A9A9A;      /* tertiary text / placeholder           */
  --aedil-ink-300: #D9D9D9;      /* hairline on light                     */
  --aedil-ink-200: #F5F5F5;      /* deck background light                 */
  --aedil-ink-100: #FFFFFF;      /* pure white                            */

  /* ============ Color — Semantic (Light Surface) ======================== */
  --bg:             var(--aedil-ink-200);  /* #F5F5F5 default canvas      */
  --bg-elevated:    var(--aedil-ink-100);
  --surface:        var(--aedil-ink-100);
  --surface-muted:  #ECECEC;

  --fg:             var(--aedil-ink-800);  /* body text on light          */
  --fg-strong:      var(--aedil-ink-900);
  --fg-muted:       var(--aedil-ink-500);
  --fg-subtle:      var(--aedil-ink-400);

  --border:         var(--aedil-ink-300);
  --border-strong:  #BDBDBD;
  --divider:        #E6E6E6;

  --accent:         var(--aedil-yellow-500);
  --accent-hover:   var(--aedil-yellow-700);
  --accent-press:   var(--aedil-yellow-900);
  --accent-soft:    var(--aedil-yellow-100);
  --on-accent:      var(--aedil-ink-900);  /* text placed ON yellow        */

  --focus-ring:     rgba(242, 183, 7, 0.35);

  /* Link */
  --link:           var(--aedil-yellow-700);
  --link-hover:     var(--aedil-yellow-900);
  --link-visited:   #7F7F7F;

  /* Success / Warn / Danger — derived from Tailwind neutrals in dashboard
     mockups, kept minimal. Yellow is reserved for brand, not warning. */
  --success:        #1E9F6E;
  --warning:        #E08700;
  --danger:         #DC2626;   /* PPTX secondary red #FF4E51 exists but     */
  --danger-bold:    #FF4E51;   /* reserved as chart / alt accent only.      */

  /* ============ Color — Dark Surface ==================================== */
  /* Product UI (AEDIL Console) runs dark. Toggle scope via [data-theme].   */

  /* ============ Typography — Families =================================== */
  --font-display:   "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:      "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:      "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ============ Typography — Weights ==================================== */
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;

  /* ============ Typography — Tracking (letter-spacing) ================== */
  /* Per guide: Manrope headlines use -2% tracking; IBM Plex body uses 0%. */
  --tracking-display: -0.02em;   /* -2% — Manrope headlines                */
  --tracking-tight:   -0.01em;
  --tracking-normal:   0;        /* IBM Plex body                          */
  --tracking-wide:     0.02em;
  --tracking-eyebrow:  0.14em;   /* ALL-CAPS eyebrows / section labels     */

  /* ============ Typography — Leading (line-height) ====================== */
  /* Per guide: Manrope headlines 110%; IBM Plex body 120%.                 */
  --leading-display:  1.10;
  --leading-heading:  1.15;
  --leading-body:     1.50;
  --leading-ui:       1.20;      /* compact UI elements                    */

  /* ============ Typography — Size Scale ================================= */
  /* Scale tuned to a 16px base, 1.25 ratio, compressed at top end so the
     deck's huge stat numerals (96pt) have a home.                         */
  --fs-eyebrow:   0.6875rem;  /* 11px — ALL-CAPS eyebrows                 */
  --fs-caption:   0.8125rem;  /* 13px                                      */
  --fs-small:     0.875rem;   /* 14px — dense UI                           */
  --fs-body:      1rem;       /* 16px — paragraph                          */
  --fs-lead:      1.125rem;   /* 18px — intro / pull                       */
  --fs-h4:        1.25rem;    /* 20px                                      */
  --fs-h3:        1.5rem;     /* 24px                                      */
  --fs-h2:        2rem;       /* 32px                                      */
  --fs-h1:        2.75rem;    /* 44px                                      */
  --fs-display-s: 3.5rem;     /* 56px                                      */
  --fs-display-m: 4.5rem;     /* 72px — deck titles (+mj-lt at 72pt)        */
  --fs-display-l: 6rem;       /* 96px — huge stat numerals (Manrope Reg)    */

  /* ============ Spacing Scale =========================================== */
  /* 4px base, consistent with deck grid (1.257in ≈ 120px indent /           */
  /*  1.291in body gutters seen in slide XMLs).                             */
  --space-0:   0;
  --space-1:   0.25rem;   /* 4  */
  --space-2:   0.5rem;    /* 8  */
  --space-3:   0.75rem;   /* 12 */
  --space-4:   1rem;      /* 16 */
  --space-5:   1.5rem;    /* 24 */
  --space-6:   2rem;      /* 32 */
  --space-7:   3rem;      /* 48 */
  --space-8:   4rem;      /* 64 */
  --space-9:   6rem;      /* 96 */
  --space-10:  8rem;      /* 128 */

  /* ============ Radii =================================================== */
  /* Deck uses softly-rounded cards (≈12–16px). UI mocks use 8–12px for
     buttons/inputs and 16–20px for cards/modals. Zero sharp edges except
     in the logo mark itself.                                              */
  --radius-0:  0;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-pill: 999px;

  /* ============ Elevation / Shadow ====================================== */
  /* Clean, low-spread shadows — industrial software, not Material bounce. */
  --shadow-0:  none;
  --shadow-1:  0 1px 2px rgba(13,13,13,0.06);
  --shadow-2:  0 2px 8px rgba(13,13,13,0.08), 0 1px 2px rgba(13,13,13,0.04);
  --shadow-3:  0 8px 24px rgba(13,13,13,0.10), 0 2px 6px rgba(13,13,13,0.06);
  --shadow-4:  0 20px 48px rgba(13,13,13,0.16), 0 4px 12px rgba(13,13,13,0.08);
  /* Dark-surface inner highlights (used on the Console UI) */
  --shadow-dark-1: 0 1px 0 rgba(255,255,255,0.04) inset, 0 1px 2px rgba(0,0,0,0.4);
  --shadow-dark-2: 0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 24px rgba(0,0,0,0.5);
  /* Gold glow — used sparingly (hero accents, key CTAs) */
  --glow-gold: 0 0 0 1px rgba(242,183,7,0.35), 0 8px 32px rgba(242,183,7,0.25);

  /* ============ Gradients — Signature Fill System ======================= */
  /* The deck's two signature fill treatments — extracted from slide 22/23
     gradFills. These are the ONLY gradient recipes used in AEDIL. Never
     invent new ones; never mix yellow and ink inside one gradient.         */

  /* Yellow fade-in: alpha 0% → 100% along X. The "spotlight" / progress-
     chevron / step-callout fill. angle 19800000 = 330deg ≈ diag bottom-L
     to top-R. Used at ~72% scale for progress chevrons, stat banners. */
  --grad-gold-sweep:  linear-gradient(30deg, rgba(242,184,15,0) 0%, rgba(242,184,15,1) 100%);
  /* Yellow → silver (D9D9D9): the dark-on-light "Graphics" stack fill.
     angle 16200000 = 270deg (top-to-bottom). Used on full-bleed panels
     when you want brand presence WITHOUT a dark anchor.                    */
  --grad-gold-to-silver: linear-gradient(180deg, var(--aedil-yellow-500) 0%, #D9D9D9 100%);
  /* Ink fade-out: 262626 100% → 262626 alpha 0%. The dark "shadow-edge"
     used to soft-anchor a dark panel into the canvas.                      */
  --grad-ink-fade:    linear-gradient(180deg, var(--aedil-ink-700) 0%, rgba(38,38,38,0) 100%);
  /* Ink 1A→26: the subtle top-down dark on homePlate step chevrons.       */
  --grad-ink-step:    linear-gradient(150deg, var(--aedil-ink-800) 0%, var(--aedil-ink-700) 100%);

  /* ============ Ornaments — Generative Geometries ======================= */
  /* AEDIL's distinctive brand texture: fine gold line-art geometries
     (torus, spirograph, orbit ring, dot grid, sunburst). Use as accent
     marks on section starts, stat slides, or empty states. NEVER redraw
     these in SVG at small sizes — they are dense line weaves whose raster
     character IS the aesthetic.                                            */
  --ornament-size-sm: 56px;    /* inline eyebrow-adjacent                  */
  --ornament-size-md: 120px;   /* card accent                              */
  --ornament-size-lg: 240px;   /* section-header floater                   */
  --ornament-size-xl: 420px;   /* slide-corner mark                        */

  /* ============ Motion ================================================== */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-in:     cubic-bezier(0.55, 0, 1, 0.45);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   320ms;
  --dur-xslow:  520ms;

  /* ============ Layout ================================================== */
  --content-narrow: 720px;
  --content-base:   1120px;
  --content-wide:   1440px;
  --slide-w:        1920px;
  --slide-h:        1080px;
}

/* =================== Dark surface scoping =============================== */
/* Product console + any section that opts into dark. */
[data-theme="dark"] {
  --bg:            var(--aedil-ink-800);
  --bg-elevated:   var(--aedil-ink-700);
  --surface:       #1E1E1E;
  --surface-muted: var(--aedil-ink-700);

  --fg:            #EDEDED;
  --fg-strong:     #FFFFFF;
  --fg-muted:      var(--aedil-ink-400);
  --fg-subtle:     var(--aedil-ink-500);

  --border:        #2E2E2E;
  --border-strong: #3A3A3A;
  --divider:       #242424;

  --on-accent:     var(--aedil-ink-900);

  --link:          var(--aedil-yellow-500);
  --link-hover:    var(--aedil-yellow-300);
}

/* =================== Base element mappings ============================== */
html {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body { margin: 0; font-family: var(--font-body); line-height: var(--leading-body); }

h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-display);
  color: var(--fg-strong);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); line-height: var(--leading-heading); }
h3 { font-size: var(--fs-h3); font-weight: var(--weight-semibold); line-height: var(--leading-heading); }
h4 { font-size: var(--fs-h4); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); line-height: var(--leading-ui); }

p {
  font-size: var(--fs-body);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-normal);
  color: var(--fg);
  margin: 0 0 var(--space-4);
  text-wrap: pretty;
}
small { font-size: var(--fs-small); color: var(--fg-muted); }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-muted);
  display: inline-block;
}

.display-xl { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-display-l); line-height: var(--leading-display); letter-spacing: var(--tracking-display); color: var(--aedil-yellow-500); }
.display-lg { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-display-m); line-height: var(--leading-display); letter-spacing: var(--tracking-display); }
.display-md { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-display-s); line-height: var(--leading-display); letter-spacing: var(--tracking-display); }

code, .mono { font-family: var(--font-mono); font-size: 0.9375em; }

a { color: var(--link); text-decoration: none; border-bottom: 1px solid transparent; transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--link-hover); border-bottom-color: currentColor; }

::selection { background: var(--aedil-yellow-300); color: var(--aedil-ink-900); }