/*
 * logicli_tokens.css
 * 4-layer architecture:
 *   L1 primitives      — hex anchors, brand kit §5
 *   L2 vibe overrides  — [data-vibe="..."] repaints L3
 *   L3 semantic tokens — --lcl-* vars that components read
 *   L4 component base  — the floor before any vibe speaks
 *
 * All colors locked to brand kit §5. No ad-lib hex.
 */

/* ---------- L1 primitives ---------- */
:root {
  /* bridges (shared family DNA) */
  --p-orange-soda:      #F95738;
  --p-cedar-chest:      #D25346;

  /* warm ramp — andrewalbin canon, foregrounded */
  --p-mandarin:         #F47742;
  --p-sandy-brown:      #EE964B;
  --p-orange-yellow:    #F4D35E;
  --p-apricot:          #FFCDB2;
  --p-pastel-pink:      #E5989B;
  --p-english-lavender: #B5838D;
  --p-byzantium:        #733667;

  /* electric-warm expansion — logicli-native */
  --p-plasma-rose:      #FF2D8B;
  --p-plasma-orange:    #FF4D00;
  --p-electric-pink:    #FF00A8;
  --p-vasarely-black:   #0A0A0A;
  --p-zen-cream:        #FFF6EC;

  /* zen-garden grounds (from brand kit §5 zen-garden-warm vibe) */
  --p-beige:            #EBEBD3;

  /* ---------- L3 semantic defaults ---------- */
  /* overridden per vibe */
  --lcl-bg:             var(--p-vasarely-black);
  --lcl-fg:             var(--p-zen-cream);
  --lcl-dim:            rgba(255, 246, 236, 0.55);
  --lcl-rule:           rgba(255, 246, 236, 0.12);

  --lcl-signal:         var(--p-plasma-orange);
  --lcl-signal-alt:     var(--p-plasma-rose);
  --lcl-signal-deep:    var(--p-cedar-chest);

  --lcl-field-bg:       rgba(255, 246, 236, 0.06);
  --lcl-field-border:   rgba(255, 246, 236, 0.18);
  --lcl-field-focus:    var(--p-plasma-orange);

  /* type families */
  --lcl-font-display:   "Reckless Neue", "PP Editorial New", "Canela", "Newsreader", Georgia, serif;
  --lcl-font-body:      "Söhne", "Inter Tight", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --lcl-font-mono:      "IBM Plex Mono", "JetBrains Mono", "Berkeley Mono", ui-monospace, monospace;

  --lcl-tracking-display: -0.02em;
  --lcl-tracking-caps:     0.18em;

  /* space & radii */
  --lcl-radius-sm:  2px;
  --lcl-radius-md:  4px;
  --lcl-radius-lg:  12px;
  --lcl-radius-pill: 999px;

  /* motion */
  --lcl-ease:      cubic-bezier(.2, .7, .2, 1);
  --lcl-dur-fast:  180ms;
  --lcl-dur-med:   480ms;
  --lcl-dur-slow:  900ms;
}

/* ---------- L2 vibe overrides ---------- */

/* op-vasarely-canvas — the page IS the art */
[data-vibe="op-vasarely-canvas"] {
  --lcl-bg:         var(--p-vasarely-black);
  --lcl-fg:         var(--p-zen-cream);
  --lcl-dim:        rgba(255, 246, 236, 0.5);
  --lcl-rule:       rgba(255, 77, 0, 0.28);
  --lcl-signal:     var(--p-plasma-orange);
  --lcl-signal-alt: var(--p-plasma-rose);
  --lcl-field-bg:   rgba(10, 10, 10, 0.55);
  --lcl-field-border: rgba(255, 77, 0, 0.5);
}

/* collection-drop — editorial campaign drop */
[data-vibe="collection-drop"] {
  --lcl-bg:         var(--p-orange-soda);
  --lcl-fg:         var(--p-zen-cream);
  --lcl-dim:        rgba(255, 246, 236, 0.65);
  --lcl-rule:       rgba(255, 246, 236, 0.35);
  --lcl-signal:     var(--p-zen-cream);
  --lcl-signal-alt: var(--p-byzantium);
  --lcl-signal-deep: var(--p-cedar-chest);
  --lcl-field-bg:   rgba(255, 246, 236, 0.1);
  --lcl-field-border: rgba(255, 246, 236, 0.5);
}

/* playful-brutalist — default fonts, clashing warms */
[data-vibe="playful-brutalist"] {
  --lcl-bg:         var(--p-zen-cream);
  --lcl-fg:         var(--p-vasarely-black);
  --lcl-dim:        #444;
  --lcl-rule:       var(--p-vasarely-black);
  --lcl-signal:     var(--p-electric-pink);
  --lcl-signal-alt: var(--p-orange-soda);
  --lcl-signal-deep: var(--p-byzantium);
  --lcl-field-bg:   var(--p-zen-cream);
  --lcl-field-border: var(--p-vasarely-black);
  --lcl-font-display: "Times New Roman", Times, serif;
  --lcl-font-body:    Arial, "Helvetica", sans-serif;
  --lcl-font-mono:    "Courier New", Courier, monospace;
}

/* terminal-ask-andy — CRT amber-phosphor */
[data-vibe="terminal-ask-andy"] {
  --lcl-bg:         var(--p-vasarely-black);
  --lcl-fg:         var(--p-orange-yellow);
  --lcl-dim:        rgba(244, 211, 94, 0.6);
  --lcl-rule:       rgba(244, 211, 94, 0.25);
  --lcl-signal:     var(--p-plasma-orange);
  --lcl-signal-alt: var(--p-orange-soda);
  --lcl-field-bg:   transparent;
  --lcl-field-border: transparent;
  --lcl-font-display: var(--lcl-font-mono);
  --lcl-font-body:    var(--lcl-font-mono);
}

/* zen-garden-warm — warm pastel editorial */
[data-vibe="zen-garden-warm"] {
  --lcl-bg:         var(--p-beige);
  --lcl-fg:         var(--p-byzantium);
  --lcl-dim:        rgba(115, 54, 103, 0.6);
  --lcl-rule:       rgba(115, 54, 103, 0.2);
  --lcl-signal:     var(--p-cedar-chest);
  --lcl-signal-alt: var(--p-apricot);
  --lcl-signal-deep: var(--p-english-lavender);
  --lcl-field-bg:   rgba(255, 246, 236, 0.6);
  --lcl-field-border: rgba(115, 54, 103, 0.3);
}

/* cursor-is-the-prompt — canvas field, cursor deforms */
[data-vibe="cursor-is-the-prompt"] {
  --lcl-bg:         var(--p-vasarely-black);
  --lcl-fg:         var(--p-zen-cream);
  --lcl-dim:        rgba(255, 246, 236, 0.4);
  --lcl-rule:       rgba(255, 45, 139, 0.25);
  --lcl-signal:     var(--p-plasma-orange);
  --lcl-signal-alt: var(--p-electric-pink);
  --lcl-field-bg:   rgba(10, 10, 10, 0.55);
  --lcl-field-border: rgba(255, 45, 139, 0.4);
}

/* ---------- L4 component base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--lcl-bg);
  color: var(--lcl-fg);
  font-family: var(--lcl-font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition:
    background-color var(--lcl-dur-med) var(--lcl-ease),
    color var(--lcl-dur-med) var(--lcl-ease);
  overflow-x: hidden;
}

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
input, textarea { font: inherit; color: inherit; }

/* utility */
.lcl-caps {
  font-family: var(--lcl-font-mono);
  text-transform: uppercase;
  letter-spacing: var(--lcl-tracking-caps);
  font-size: 11px;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}