/* ============================================================
   Lokara Design System - Colors & Type
   ------------------------------------------------------------
   The single source of truth. Import this into every artifact:
     <link rel="stylesheet" href="colors_and_type.css">
   ============================================================ */

/* ---------- Webfonts ----------
   Substituted from Google Fonts; flagged in README. Replace with
   licensed files if you have them. */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&family=Manrope:wght@700;800&display=swap');

:root {
  /* ============================================================
     COLOR TOKENS (warm light mode = default)
     ============================================================ */

  /* Brand */
  --brand-orange:        #E06840;   /* Primary action, accent - sampled from logo */
  --brand-orange-deep:   #B84F2C;   /* Hover / pressed orange */
  --brand-orange-soft:   #F4C7B2;   /* Tinted bg, badges */
  --brand-orange-wash:   #FAEBE0;   /* Subtle wash bg */

  --brand-peacock:       #2BA3A3;   /* Secondary accent - sampled from logo */
  --brand-peacock-deep:  #1F7A7A;
  --brand-peacock-soft:  #B8E0DF;
  --brand-peacock-wash:  #E6F2F1;

  --brand-blue:          #2F4858;   /* Tertiary - deep slate-blue, calm + serious */
  --brand-blue-deep:     #1F3340;
  --brand-blue-soft:     #C7D2D9;

  --brand-ink:           #1A1714;   /* Near-black, warm */

  /* Warm neutrals (bone/parchment family) */
  --warm-50:   #FAF6F0;   /* Page background */
  --warm-100:  #F4EEE4;   /* Subtle surface */
  --warm-200:  #E9E0D2;   /* Hairline / divider */
  --warm-300:  #D4C7B2;
  --warm-400:  #A99B85;
  --warm-500:  #7A6E5C;
  --warm-600:  #574E40;
  --warm-700:  #3E372D;
  --warm-800:  #2B251E;
  --warm-900:  #1A1714;

  /* Semantic - surface */
  --bg:           var(--warm-50);
  --bg-elevated:  #FFFFFF;
  --bg-sunken:    var(--warm-100);
  --bg-inverse:   var(--warm-900);

  /* Semantic - foreground */
  --fg-1:         var(--warm-900);     /* Primary text, headings */
  --fg-2:         var(--warm-700);     /* Body text */
  --fg-3:         var(--warm-500);     /* Secondary text, captions */
  --fg-4:         var(--warm-400);     /* Disabled, hint */
  --fg-inverse:   var(--warm-50);

  /* Semantic - borders */
  --border-1:     var(--warm-200);     /* Hairline */
  --border-2:     var(--warm-300);     /* Standard */
  --border-strong: var(--warm-500);

  /* Semantic - accents */
  --accent:           var(--brand-orange);
  --accent-hover:     var(--brand-orange-deep);
  --accent-fg:        #FFFFFF;
  --accent-soft-bg:   var(--brand-orange-wash);
  --accent-soft-fg:   var(--brand-orange-deep);

  --accent-2:         var(--brand-peacock);
  --accent-2-hover:   var(--brand-peacock-deep);
  --accent-2-fg:      #FFFFFF;
  --accent-2-soft-bg: var(--brand-peacock-wash);
  --accent-2-soft-fg: var(--brand-peacock-deep);

  /* Status */
  --success:      #2E7D5B;
  --success-bg:   #E1F0E8;
  --warning:      #C57A1F;
  --warning-bg:   #FBEBD2;
  --danger:       #B84438;
  --danger-bg:    #F6DDD9;
  --info:         var(--brand-peacock-deep);
  --info-bg:      var(--brand-peacock-wash);

  /* ============================================================
     RADII & SHADOW
     ============================================================ */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* Soft, warm shadows (no cool blue tint) */
  --shadow-xs: 0 1px 0 rgba(60, 40, 20, 0.04);
  --shadow-sm: 0 1px 2px rgba(60, 40, 20, 0.06), 0 1px 1px rgba(60, 40, 20, 0.04);
  --shadow-md: 0 4px 12px rgba(60, 40, 20, 0.08), 0 1px 2px rgba(60, 40, 20, 0.04);
  --shadow-lg: 0 12px 32px rgba(60, 40, 20, 0.10), 0 2px 6px rgba(60, 40, 20, 0.05);
  --shadow-xl: 0 24px 64px rgba(60, 40, 20, 0.14), 0 4px 12px rgba(60, 40, 20, 0.06);
  --shadow-focus: 0 0 0 3px rgba(224, 104, 64, 0.25);

  /* ============================================================
     SPACING (4-pt grid)
     ============================================================ */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ============================================================
     TYPOGRAPHY - Families
     ============================================================ */
  --font-display: 'Instrument Serif', 'Iowan Old Style', 'Times New Roman', serif;
  --font-sans:    'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ============================================================
     TYPOGRAPHY - Type scale (semantic)
     Naming: --t-{role}-{size|weight|leading|tracking}
     ============================================================ */

  /* Display (serif, editorial - for hero / slide titles only) */
  --t-display-size:    72px;
  --t-display-leading: 1.02;
  --t-display-track:   -0.02em;
  --t-display-weight:  400;

  /* H1 - page titles */
  --t-h1-size:    44px;
  --t-h1-leading: 1.08;
  --t-h1-track:   -0.02em;
  --t-h1-weight:  500;

  /* H2 - section titles */
  --t-h2-size:    32px;
  --t-h2-leading: 1.15;
  --t-h2-track:   -0.015em;
  --t-h2-weight:  500;

  /* H3 - subsection */
  --t-h3-size:    22px;
  --t-h3-leading: 1.25;
  --t-h3-track:   -0.01em;
  --t-h3-weight:  600;

  /* H4 - card title / minor heading */
  --t-h4-size:    16px;
  --t-h4-leading: 1.35;
  --t-h4-track:   -0.005em;
  --t-h4-weight:  600;

  /* Body L - long-form reading */
  --t-body-l-size:    18px;
  --t-body-l-leading: 1.55;
  --t-body-l-track:   0;
  --t-body-l-weight:  400;

  /* Body - default UI text */
  --t-body-size:    15px;
  --t-body-leading: 1.55;
  --t-body-track:   0;
  --t-body-weight:  400;

  /* Body S */
  --t-body-s-size:    13px;
  --t-body-s-leading: 1.45;
  --t-body-s-track:   0;
  --t-body-s-weight:  400;

  /* Caption / micro */
  --t-caption-size:    12px;
  --t-caption-leading: 1.4;
  --t-caption-track:   0;
  --t-caption-weight:  500;

  /* Eyebrow / label */
  --t-eyebrow-size:    11px;
  --t-eyebrow-leading: 1.2;
  --t-eyebrow-track:   0.12em;
  --t-eyebrow-weight:  600;

  /* Code */
  --t-code-size:    13px;
  --t-code-leading: 1.5;

  /* ============================================================
     MOTION
     ============================================================ */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);    /* default - calm exit */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* gentle overshoot */
  --dur-1: 120ms;
  --dur-2: 180ms;
  --dur-3: 280ms;
  --dur-4: 480ms;
}

/* ============================================================
   DARK MODE - apply via [data-theme="dark"] on <html> or <body>
   Brand stays the same; surfaces invert to warm-tinted near-black.
   ============================================================ */
[data-theme="dark"] {
  --bg:           #14110E;
  --bg-elevated:  #1E1A15;
  --bg-sunken:    #0F0D0A;
  --bg-inverse:   var(--warm-50);

  --fg-1:         #F4EEE4;
  --fg-2:         #D4C7B2;
  --fg-3:         #A99B85;
  --fg-4:         #7A6E5C;
  --fg-inverse:   var(--warm-900);

  --border-1:     #2B251E;
  --border-2:     #3E372D;
  --border-strong: #574E40;

  --accent-soft-bg: rgba(224, 104, 64, 0.14);
  --accent-soft-fg: #F4A57F;
  --accent-2-soft-bg: rgba(43, 163, 163, 0.14);
  --accent-2-soft-fg: #6FCFCE;

  --shadow-xs: 0 1px 0 rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55);
  --shadow-xl: 0 32px 72px rgba(0, 0, 0, 0.6);
}

/* ============================================================
   BASE - apply only to documents that opt in
   (Adds the Lokara look to <body> when class="lokara")
   ============================================================ */
.lokara,
body.lokara {
  background: var(--bg);
  color: var(--fg-2);
  font-family: var(--font-sans);
  font-size: var(--t-body-size);
  line-height: var(--t-body-leading);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
}

.lokara h1, .lokara .h1 {
  font-family: var(--font-sans);
  font-size: var(--t-h1-size);
  line-height: var(--t-h1-leading);
  letter-spacing: var(--t-h1-track);
  font-weight: var(--t-h1-weight);
  color: var(--fg-1);
  margin: 0;
}
.lokara h2, .lokara .h2 {
  font-family: var(--font-sans);
  font-size: var(--t-h2-size);
  line-height: var(--t-h2-leading);
  letter-spacing: var(--t-h2-track);
  font-weight: var(--t-h2-weight);
  color: var(--fg-1);
  margin: 0;
}
.lokara h3, .lokara .h3 {
  font-family: var(--font-sans);
  font-size: var(--t-h3-size);
  line-height: var(--t-h3-leading);
  letter-spacing: var(--t-h3-track);
  font-weight: var(--t-h3-weight);
  color: var(--fg-1);
  margin: 0;
}
.lokara h4, .lokara .h4 {
  font-family: var(--font-sans);
  font-size: var(--t-h4-size);
  line-height: var(--t-h4-leading);
  letter-spacing: var(--t-h4-track);
  font-weight: var(--t-h4-weight);
  color: var(--fg-1);
  margin: 0;
}
.lokara p, .lokara .body {
  font-size: var(--t-body-size);
  line-height: var(--t-body-leading);
  margin: 0;
}
.lokara .display {
  font-family: var(--font-display);
  font-size: var(--t-display-size);
  line-height: var(--t-display-leading);
  letter-spacing: var(--t-display-track);
  font-weight: var(--t-display-weight);
  color: var(--fg-1);
}
.lokara .body-l    { font-size: var(--t-body-l-size); line-height: var(--t-body-l-leading); }
.lokara .body-s    { font-size: var(--t-body-s-size); line-height: var(--t-body-s-leading); }
.lokara .caption   { font-size: var(--t-caption-size); line-height: var(--t-caption-leading); color: var(--fg-3); }
.lokara .eyebrow   {
  font-size: var(--t-eyebrow-size);
  line-height: var(--t-eyebrow-leading);
  letter-spacing: var(--t-eyebrow-track);
  font-weight: var(--t-eyebrow-weight);
  text-transform: uppercase;
  color: var(--fg-3);
}
.lokara code, .lokara .mono {
  font-family: var(--font-mono);
  font-size: var(--t-code-size);
  line-height: var(--t-code-leading);
}

/* Selection */
.lokara ::selection {
  background: var(--brand-orange);
  color: #fff;
}