/* =============================================================
 * LUCASLIB VISUAL SYSTEM · V2 · CINEMATIC GRAPHITE
 * File: /css/lucaslib-system-v2.css
 * Built: 2026-05-13 · Phase 5A · V2 pivot
 *
 * Doctrine: LUCASLIB-VISUAL-SYSTEM-V2.md
 *
 * NORTH STAR: The locked homepage hero. Graphite + concrete + off-white +
 * thin technical borders + cinematic spotlight + subtle camo flecks +
 * Apple-level restraint.
 *
 * THIS FILE IS THE FUTURE VISUAL LANGUAGE. V1 navy/cream/gold tokens
 * are retained only as LEGACY COMPATIBILITY aliases at the bottom of
 * this file so existing pages do not break during migration.
 *
 * NO-OP BY DEFAULT:
 *   - All tokens use --ll-* prefix → do not collide with per-page :root
 *   - All component classes use .ll-* prefix → inactive until pages opt in
 *
 * MIGRATION: Pages move from inline tokens to .ll-* classes one at a time.
 * V2 is the destination for every page. V1 inline blocks are deleted after
 * each page migrates.
 * ============================================================= */


/* -------------------------------------------------------------
 * 1 · V2 PRIMARY · CINEMATIC GRAPHITE TOKENS
 * ------------------------------------------------------------- */
:root {
  /* --- GRAPHITE SCALE (primary dark surfaces · the hero language) --- */
  --ll-graphite:          #14171A;    /* primary dark · matches hero shade */
  --ll-graphite-deep:     #0A0C0F;    /* near-black · hero shadow zones */
  --ll-charcoal:          #232830;    /* warm charcoal · secondary dark */
  --ll-charcoal-soft:     #2D333C;    /* lifted charcoal · panel surfaces */

  /* --- CONCRETE SCALE (mid-tone neutrals) --- */
  --ll-concrete:          #4A5058;    /* concrete gray · mid-tone */
  --ll-concrete-soft:     #7B8087;    /* lighter concrete · captions on dark */
  --ll-fog:               #C8CBD0;    /* fog gray · borders + soft text on dark */

  /* --- BONE / OFF-WHITE SCALE (primary light surfaces) --- */
  --ll-bone:              #EEEAE1;    /* bone · primary off-white surface */
  --ll-bone-soft:         #F4F0E7;    /* soft bone · panel surfaces */
  --ll-bone-deep:         #E5E0D5;    /* deeper bone · subtle contrast */
  --ll-paper-tech:        #F4F5F7;    /* cool tech white · technical content */

  /* --- INK ON LIGHT (text colors when bg is bone/paper) --- */
  --ll-ink:               #14171A;    /* primary ink · graphite headlines */
  --ll-ink-2:             rgba(20, 23, 26, 0.78);   /* body text · 78% */
  --ll-ink-3:             rgba(20, 23, 26, 0.56);   /* captions · 56% */
  --ll-ink-4:             rgba(20, 23, 26, 0.22);   /* rules · 22% */
  --ll-ink-5:             rgba(20, 23, 26, 0.10);   /* hairlines · 10% */

  /* --- TEXT ON DARK (text colors when bg is graphite) --- */
  --ll-text-bone:         #EEEAE1;                  /* primary text on dark */
  --ll-text-bone-2:       rgba(238, 234, 225, 0.78); /* body on dark · 78% */
  --ll-text-bone-3:       rgba(238, 234, 225, 0.56); /* captions on dark */
  --ll-text-bone-4:       rgba(238, 234, 225, 0.22); /* rules on dark */
  --ll-text-bone-5:       rgba(238, 234, 225, 0.10); /* hairlines on dark */

  /* --- ACCENT (restrained · cinematic · technical) --- */
  --ll-gold:              #C9941F;    /* warm gold · primary accent (carried from V1) */
  --ll-gold-bright:       #E8AE3A;    /* brighter gold for dark surfaces */
  --ll-gold-soft:         #B07F1B;    /* deeper gold for light surfaces */
  --ll-teal-tech:         #4A7B82;    /* technical teal · charts, callouts */
  --ll-teal-soft:         #6A9DA4;    /* lighter teal on dark */

  /* --- FLECK ACCENT COLORS (matched to fleck PNG palette · muted rainbow) --- */
  --ll-fleck-teal:        #4A8C92;
  --ll-fleck-blue:        #4A6B92;
  --ll-fleck-gold:        #B8945A;
  --ll-fleck-coral:       #B8704A;
  --ll-fleck-sage:        #708570;

  /* --- DARK GLASS PANELS (cinematic overlays) --- */
  --ll-glass-graphite:    rgba(20, 23, 26, 0.72);
  --ll-glass-graphite-2:  rgba(20, 23, 26, 0.85);
  --ll-glass-bone:        rgba(238, 234, 225, 0.06);
  --ll-glass-edge:        rgba(238, 234, 225, 0.14);

  /* --- THIN TECHNICAL BORDERS --- */
  --ll-border-tech:       rgba(20, 23, 26, 0.10);     /* hairline on light */
  --ll-border-tech-2:     rgba(20, 23, 26, 0.18);     /* panel border on light */
  --ll-border-dark:       rgba(238, 234, 225, 0.10);  /* hairline on dark */
  --ll-border-dark-2:     rgba(238, 234, 225, 0.18);  /* panel border on dark */
  --ll-focus-ring:        var(--ll-gold);

  /* --- CINEMATIC GRADIENTS (spotlight falloff) --- */
  --ll-spot-graphite:     radial-gradient(ellipse 80% 60% at 50% 35%,
                            #232830 0%, #14171A 55%, #0A0C0F 100%);
  --ll-spot-bone:         radial-gradient(ellipse 70% 55% at 50% 40%,
                            #F4F0E7 0%, #EEEAE1 60%, #E5E0D5 100%);
  --ll-gradient-edge:     linear-gradient(180deg,
                            rgba(20, 23, 26, 0) 0%,
                            rgba(20, 23, 26, 0.40) 100%);

  /* --- STATUS / SIGNAL --- */
  --ll-positive:          #4A7B82;
  --ll-warning:           #C9941F;
  --ll-negative:          #A8412E;

  /* --- TYPOGRAPHY · FAMILIES (premium technical stack) --- */
  --ll-serif:             'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --ll-sans:              'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --ll-mono:              'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* --- TYPOGRAPHY · SCALE --- */
  --ll-font-display:      clamp(48px, 6vw, 88px);
  --ll-font-h1:           clamp(36px, 4vw, 56px);
  --ll-font-h2:           clamp(28px, 3vw, 40px);
  --ll-font-h3:           clamp(22px, 2vw, 28px);
  --ll-font-h4:           19px;
  --ll-font-body:         17px;
  --ll-font-body-sm:      15px;
  --ll-font-meta:         13px;
  --ll-font-eyebrow:      11px;

  /* --- TYPOGRAPHY · TRACKING + LEADING --- */
  --ll-track-display:     -0.014em;
  --ll-track-tight:       -0.008em;
  --ll-track-normal:       0;
  --ll-track-wide:         0.06em;
  --ll-track-eyebrow:      0.18em;    /* wider tracking · more technical */
  --ll-track-mono:         0.04em;

  --ll-lh-display:         1.02;
  --ll-lh-heading:         1.10;
  --ll-lh-body:            1.6;
  --ll-lh-tight:           1.4;

  /* --- SPACING SCALE (Apple-level restraint · 8px base) --- */
  --ll-s-1:                4px;
  --ll-s-2:                8px;
  --ll-s-3:               12px;
  --ll-s-4:               16px;
  --ll-s-5:               24px;
  --ll-s-6:               32px;
  --ll-s-7:               48px;
  --ll-s-8:               64px;
  --ll-s-9:               96px;
  --ll-s-10:             128px;
  --ll-s-11:             160px;       /* generous Apple-tier section gap */

  /* --- PAGE GUTTERS + SECTIONS --- */
  --ll-gutter:            clamp(24px, 4vw, 80px);   /* more generous gutters */
  --ll-section-pad-y:     clamp(96px, 10vw, 160px); /* Apple-tier vertical rhythm */
  --ll-section-pad-y-sm:  clamp(48px, 6vw, 96px);
  --ll-grid-gap:          clamp(16px, 2vw, 32px);
  --ll-card-pad:          var(--ll-s-5);
  --ll-panel-pad:         var(--ll-s-7);            /* more generous panel padding */

  /* --- CONTAINERS --- */
  --ll-container-wide:    1280px;
  --ll-container-mid:     1040px;
  --ll-container-text:     720px;     /* tighter editorial column */

  /* --- RADIUS (thin technical · less rounded) --- */
  --ll-radius-sm:          2px;
  --ll-radius-md:          4px;
  --ll-radius-lg:          8px;
  --ll-radius-pill:      999px;

  /* --- ELEVATION (cinematic · subtle on dark · soft on light) --- */
  --ll-shadow-1:          0 1px 2px rgba(10, 12, 15, 0.10);
  --ll-shadow-2:          0 4px 16px rgba(10, 12, 15, 0.14);
  --ll-shadow-3:          0 16px 48px rgba(10, 12, 15, 0.22);
  --ll-shadow-glow:       0 0 24px rgba(232, 174, 58, 0.18); /* gold glow */

  /* --- MOTION --- */
  --ll-dur-fast:           120ms;
  --ll-dur-base:           220ms;
  --ll-dur-slow:           420ms;
  --ll-ease-premium:       cubic-bezier(0.4, 0, 0.2, 1);
  --ll-ease-snap:          cubic-bezier(0.2, 0, 0, 1);
  --ll-ease-cinematic:     cubic-bezier(0.32, 0.72, 0, 1);   /* Apple-style */

  /* --- Z-INDEX --- */
  --ll-z-hero-bg:          1;
  --ll-z-hero-fg:          2;
  --ll-z-hero-ui:          3;
  --ll-z-section:          5;
  --ll-z-nav:             50;
  --ll-z-panel:           60;
  --ll-z-overlay:         80;
  --ll-z-modal:          100;
}


/* -------------------------------------------------------------
 * 2 · V2 COMPONENT CLASSES
 * ------------------------------------------------------------- */

/* PAGE WRAPPERS */
.ll-page {
  background: var(--ll-bone);                       /* off-white default */
  color: var(--ll-ink);                             /* graphite text */
  font-family: var(--ll-sans);
  font-size: var(--ll-font-body);
  line-height: var(--ll-lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.ll-page-dark {
  background: var(--ll-graphite);
  color: var(--ll-text-bone);
}

/* SECTIONS */
.ll-section {
  padding: var(--ll-section-pad-y) 0;
  position: relative;
}
.ll-section-sm {
  padding: var(--ll-section-pad-y-sm) 0;
}
.ll-section-light {
  background: var(--ll-bone);
  color: var(--ll-ink);
}
.ll-section-soft {
  background: var(--ll-bone-soft);
  color: var(--ll-ink);
}
.ll-section-tech {
  background: var(--ll-paper-tech);
  color: var(--ll-ink);
}
.ll-section-dark {
  background: var(--ll-graphite);
  color: var(--ll-text-bone);
}
.ll-section-dark .ll-eyebrow { color: var(--ll-gold-bright); }
.ll-section-dark .ll-body { color: var(--ll-text-bone-2); }
.ll-section-dark .ll-microcopy { color: var(--ll-text-bone-3); }
.ll-section-spotlight {
  background: var(--ll-spot-graphite);
  color: var(--ll-text-bone);
}
.ll-section-spotlight .ll-body { color: var(--ll-text-bone-2); }

/* CONTAINER */
.ll-container {
  width: 100%;
  max-width: var(--ll-container-wide);
  margin: 0 auto;
  padding-left: var(--ll-gutter);
  padding-right: var(--ll-gutter);
}
.ll-container-mid  { max-width: var(--ll-container-mid); }
.ll-container-text { max-width: var(--ll-container-text); }

/* TYPOGRAPHY */
.ll-eyebrow {
  display: inline-block;
  font-family: var(--ll-mono);
  font-size: var(--ll-font-eyebrow);
  font-weight: 400;
  letter-spacing: var(--ll-track-eyebrow);
  text-transform: uppercase;
  color: var(--ll-gold-soft);
  margin-bottom: var(--ll-s-3);
}
.ll-heading {
  font-family: var(--ll-serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--ll-font-display);
  line-height: var(--ll-lh-display);
  letter-spacing: var(--ll-track-display);
  color: var(--ll-ink);
  margin: 0 0 var(--ll-s-5) 0;
}
.ll-heading-tech {
  font-family: var(--ll-sans);
  font-weight: 600;
  font-size: var(--ll-font-h1);
  line-height: var(--ll-lh-heading);
  letter-spacing: var(--ll-track-tight);
  color: var(--ll-ink);
  margin: 0 0 var(--ll-s-4) 0;
}
.ll-subheading {
  font-family: var(--ll-sans);
  font-weight: 500;
  font-size: var(--ll-font-h2);
  line-height: var(--ll-lh-heading);
  letter-spacing: var(--ll-track-tight);
  color: var(--ll-ink);
  margin: 0 0 var(--ll-s-4) 0;
}
.ll-body {
  font-family: var(--ll-sans);
  font-size: var(--ll-font-body);
  line-height: var(--ll-lh-body);
  color: var(--ll-ink-2);
}
.ll-body-sm {
  font-family: var(--ll-sans);
  font-size: var(--ll-font-body-sm);
  line-height: var(--ll-lh-body);
  color: var(--ll-ink-2);
}
.ll-microcopy {
  font-family: var(--ll-mono);
  font-size: var(--ll-font-eyebrow);
  font-weight: 400;
  letter-spacing: var(--ll-track-eyebrow);
  text-transform: uppercase;
  color: var(--ll-ink-3);
}
.ll-meta {
  font-family: var(--ll-mono);
  font-size: var(--ll-font-meta);
  letter-spacing: var(--ll-track-mono);
  color: var(--ll-ink-3);
}

/* PANELS */
.ll-panel {
  background: var(--ll-bone-soft);
  border: 1px solid var(--ll-border-tech);
  border-radius: var(--ll-radius-md);
  padding: var(--ll-panel-pad);
}
.ll-panel-dark {
  background: var(--ll-glass-graphite-2);
  color: var(--ll-text-bone);
  border: 1px solid var(--ll-border-dark);
  border-radius: var(--ll-radius-md);
  padding: var(--ll-panel-pad);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.ll-panel-glass {
  background: var(--ll-glass-bone);
  color: var(--ll-text-bone);
  border: 1px solid var(--ll-glass-edge);
  border-radius: var(--ll-radius-md);
  padding: var(--ll-panel-pad);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* CARDS */
.ll-card {
  background: var(--ll-bone-soft);
  border: 1px solid var(--ll-border-tech);
  border-radius: var(--ll-radius-md);
  padding: var(--ll-card-pad);
  transition: transform var(--ll-dur-base) var(--ll-ease-premium),
              border-color var(--ll-dur-base) var(--ll-ease-premium),
              box-shadow var(--ll-dur-base) var(--ll-ease-premium);
}
.ll-card:hover {
  transform: translateY(-2px);
  border-color: var(--ll-border-tech-2);
  box-shadow: var(--ll-shadow-2);
}
.ll-card-dark {
  background: var(--ll-charcoal);
  color: var(--ll-text-bone);
  border: 1px solid var(--ll-border-dark);
  border-radius: var(--ll-radius-md);
  padding: var(--ll-card-pad);
  transition: transform var(--ll-dur-base) var(--ll-ease-premium),
              border-color var(--ll-dur-base) var(--ll-ease-premium);
}
.ll-card-dark:hover {
  transform: translateY(-2px);
  border-color: var(--ll-border-dark-2);
}
.ll-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--ll-grid-gap);
}

/* BUTTONS */
.ll-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ll-s-2);
  padding: 14px 28px;
  border: 1px solid transparent;
  border-radius: var(--ll-radius-md);
  font-family: var(--ll-sans);
  font-size: var(--ll-font-body-sm);
  font-weight: 500;
  letter-spacing: var(--ll-track-normal);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--ll-dur-base) var(--ll-ease-premium),
              color var(--ll-dur-base) var(--ll-ease-premium),
              border-color var(--ll-dur-base) var(--ll-ease-premium),
              transform var(--ll-dur-fast) var(--ll-ease-premium);
}
.ll-button-primary {
  background: var(--ll-ink);
  color: var(--ll-bone);
  border-color: var(--ll-ink);
}
.ll-button-primary:hover {
  background: var(--ll-gold);
  color: var(--ll-graphite);
  border-color: var(--ll-gold);
}
.ll-button-ghost {
  background: transparent;
  color: var(--ll-ink);
  border-color: var(--ll-border-tech-2);
}
.ll-button-ghost:hover {
  border-color: var(--ll-gold);
  color: var(--ll-gold);
}
.ll-button-tech {
  background: transparent;
  color: var(--ll-ink);
  border-color: var(--ll-ink);
  font-family: var(--ll-mono);
  font-size: var(--ll-font-eyebrow);
  letter-spacing: var(--ll-track-eyebrow);
  text-transform: uppercase;
  padding: 12px 24px;
}
.ll-button-tech:hover {
  background: var(--ll-ink);
  color: var(--ll-bone);
}
.ll-button:active { transform: translateY(1px); }

/* RULES + DIVIDERS */
.ll-divider {
  width: 64px;
  height: 1px;
  background: var(--ll-gold);
  margin: var(--ll-s-8) auto;
  border: 0;
}
.ll-hairline {
  width: 100%;
  height: 1px;
  background: var(--ll-border-tech);
  border: 0;
  margin: var(--ll-s-7) 0;
}
.ll-hairline-dark {
  width: 100%;
  height: 1px;
  background: var(--ll-border-dark);
  border: 0;
  margin: var(--ll-s-7) 0;
}

/* FOCUS RING (a11y) */
.ll-focus-ring:focus-visible,
.ll-button:focus-visible {
  outline: 2px solid var(--ll-focus-ring);
  outline-offset: 3px;
}


/* -------------------------------------------------------------
 * 3 · FLECK ACCENT RULES
 *
 * Asset: /img/lucaslib-fleck-texture-v1.png (1024×1024 transparent)
 * Rule: ONE fleck moment per viewport. Subtle. Cinematic. Never over body copy.
 * ------------------------------------------------------------- */

.ll-fleck-accent {
  position: relative;
  isolation: isolate;
}
.ll-fleck-accent::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('/img/lucaslib-fleck-texture-v1.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 320px 320px;
  opacity: 0.20;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 0;
}
.ll-fleck-accent.is-dark::after {
  mix-blend-mode: screen;
  opacity: 0.14;
}
.ll-fleck-accent > * {
  position: relative;
  z-index: 1;
}

.ll-fleck-wash {
  position: relative;
  isolation: isolate;
}
.ll-fleck-wash::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('/img/lucaslib-fleck-texture-v1.png');
  background-repeat: repeat;
  background-size: 480px 480px;
  opacity: 0.05;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 0;
}
.ll-fleck-wash > * {
  position: relative;
  z-index: 1;
}

/* Camo wash · dark section with subtle fleck texture */
.ll-camo-wash {
  position: relative;
  background: var(--ll-graphite);
  color: var(--ll-text-bone);
  isolation: isolate;
}
.ll-camo-wash::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('/img/lucaslib-fleck-texture-v1.png');
  background-repeat: repeat;
  background-size: 600px 600px;
  opacity: 0.10;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 0;
}
.ll-camo-wash > * {
  position: relative;
  z-index: 1;
}


/* -------------------------------------------------------------
 * 4 · ACCESSIBILITY · REDUCED MOTION
 * ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0ms !important;
    animation-duration: 0ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  .ll-card:hover, .ll-card-dark:hover { transform: none; }
}


/* -------------------------------------------------------------
 * 5 · PRINT
 * ------------------------------------------------------------- */
@media print {
  .ll-page, .ll-page-dark { background: #fff; color: #000; }
  .ll-section-dark, .ll-section-spotlight, .ll-panel-dark, .ll-panel-glass,
  .ll-card-dark, .ll-camo-wash { background: #fff; color: #000; }
  .ll-fleck-accent::after, .ll-fleck-wash::before, .ll-camo-wash::before { display: none; }
  .ll-button { border: 1px solid #000; color: #000; background: transparent; }
}


/* -------------------------------------------------------------
 * 6 · UTILITIES
 * ------------------------------------------------------------- */
.ll-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.ll-stack-2 > * + * { margin-top: var(--ll-s-2); }
.ll-stack-3 > * + * { margin-top: var(--ll-s-3); }
.ll-stack-4 > * + * { margin-top: var(--ll-s-4); }
.ll-stack-5 > * + * { margin-top: var(--ll-s-5); }
.ll-stack-6 > * + * { margin-top: var(--ll-s-6); }
.ll-stack-7 > * + * { margin-top: var(--ll-s-7); }


/* =============================================================
 * 7 · LEGACY COMPATIBILITY · V1 ALIASES
 *
 * DO NOT use these for new work. They exist solely to prevent
 * existing pages from breaking during the V1 → V2 migration.
 *
 * Every page migration should DELETE its dependence on these
 * legacy aliases. Once 100% of pages are migrated to V2 tokens,
 * this entire block can be removed.
 *
 * Aliases are namespaced --ll-legacy-* so they NEVER override
 * a page's own inline :root (no collision possible).
 *
 * Original V1 token values (for reference):
 *   --ink:   #021F3A  (navy)
 *   --paper: #FAF7F2  (warm cream)
 *   --gold:  #C9941F  (warm gold · carried forward to V2)
 *   --teal:  #1F7D8C  (replaced by --ll-teal-tech)
 * ============================================================= */
:root {
  --ll-legacy-ink-navy:    #021F3A;
  --ll-legacy-paper-cream: #FAF7F2;
  --ll-legacy-gold:        #C9941F;
  --ll-legacy-teal:        #1F7D8C;
}


/* =============================================================
 * END · LUCASLIB VISUAL SYSTEM V2 · CINEMATIC GRAPHITE
 * ============================================================= */