/* ============================================================
   INDIE Group Design System — Colors & Type
   Japan Design-minded: simple, aesthetic, quiet confidence.
   ============================================================ */

/* --- Google Fonts: flagged substitutions for brand fonts ----
   Display:  Anton / Bebas Neue  (chunky geometric sans — see indiebrand, indiepreneur, ims, indiespace)
   UI/Text:  Inter-alt → "Be Vietnam Pro" (geometric humanist, INDIE Kost / Labs / Pack vibe)
   JP:       "Noto Sans JP"  (indiecafe, yappari katakana/hiragana)
   Mono:     "JetBrains Mono" (labs / technical applications)
   Script:   "Caveat" (indiepreneur cursive flourish)
   ------------------------------------------------------------ */
@import url("https://fonts.googleapis.com/css2?family=Anton&family=Bebas+Neue&family=Be+Vietnam+Pro:wght@300;400;500;600;700;800&family=Noto+Sans+JP:wght@300;400;500;700&family=JetBrains+Mono:wght@400;600&family=Caveat:wght@500;700&display=swap");

:root {
  /* ===== Brand Palette (raw) ===== */

  /* INDIE red-orange — parent/signal color */
  --indie-orange-50:  #FFF2EC;
  --indie-orange-100: #FFD6C2;
  --indie-orange-300: #FF7A40;
  --indie-orange-500: #F04000;  /* indiebrand, indiepreneur, indiespace */
  --indie-orange-600: #D93600;
  --indie-orange-700: #B02B00;

  /* Classic red — Indie Music School */
  --indie-red-500: #D03020;

  /* Deep navy — foundational, "ink" */
  --indie-navy-50:  #E6EEF5;
  --indie-navy-100: #B8CEE0;
  --indie-navy-300: #2F679A;
  --indie-navy-500: #004080;  /* indiecafe, indielabs, indiepack, pixelindie */
  --indie-navy-700: #002E5C;
  --indie-navy-900: #001933;

  /* Bright cyan — approachable, everyday */
  --indie-cyan-50:  #E0F4FD;
  --indie-cyan-100: #A6E1F8;
  --indie-cyan-500: #00A0E0;  /* indieruma, indiekost */
  --indie-cyan-700: #0078A8;

  /* Warm yellow — paper, packaging accent */
  --indie-yellow-100: #FFF5C7;
  --indie-yellow-400: #F0D050;  /* indiepaper primary, indiepack accent */
  --indie-yellow-600: #BFA024;

  /* Neutrals (warm, paper-leaning) */
  --ink-0:   #FFFFFF;
  --ink-50:  #FAFAF7;  /* off-white, washi paper */
  --ink-100: #F2F1EC;
  --ink-200: #E4E2DA;
  --ink-300: #C9C6BC;
  --ink-400: #9A968A;
  --ink-500: #6E6A60;
  --ink-700: #3D3B35;
  --ink-900: #1A1A17;
  --ink-1000:#000000;

  /* ===== Semantic: primary / surface / fg ===== */
  --bg:            var(--ink-50);
  --bg-elev:       var(--ink-0);
  --bg-sunken:     var(--ink-100);
  --bg-inverse:    var(--indie-navy-900);

  --fg-1:          var(--indie-navy-900);  /* primary text */
  --fg-2:          var(--ink-700);         /* body */
  --fg-3:          var(--ink-500);         /* secondary / meta */
  --fg-4:          var(--ink-400);         /* placeholder */
  --fg-on-dark:    var(--ink-0);
  --fg-on-brand:   var(--ink-0);

  --border-subtle: var(--ink-200);
  --border:        var(--ink-300);
  --border-strong: var(--ink-700);

  --accent:        var(--indie-orange-500);
  --accent-hover:  var(--indie-orange-600);
  --accent-press:  var(--indie-orange-700);

  --link:          var(--indie-navy-500);
  --link-hover:    var(--indie-navy-700);

  --success: #2E8B57;
  --warning: #C48A00;
  --danger:  var(--indie-red-500);
  --info:    var(--indie-cyan-500);

  /* ===== Type families ===== */
  --font-display: "Anton", "Bebas Neue", "Impact", system-ui, sans-serif;
  --font-sans:    "Be Vietnam Pro", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-jp:      "Noto Sans JP", "Be Vietnam Pro", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-script:  "Caveat", "Brush Script MT", cursive;

  /* ===== Type scale (rem, 16px base) ===== */
  --fs-xs:   0.75rem;  /* 12 */
  --fs-sm:   0.875rem; /* 14 */
  --fs-base: 1rem;     /* 16 */
  --fs-md:   1.125rem; /* 18 */
  --fs-lg:   1.375rem; /* 22 */
  --fs-xl:   1.75rem;  /* 28 */
  --fs-2xl:  2.25rem;  /* 36 */
  --fs-3xl:  3rem;     /* 48 */
  --fs-4xl:  4rem;     /* 64 */
  --fs-5xl:  5.5rem;   /* 88 — display */

  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-body:  1.55;
  --lh-loose: 1.75;

  --ls-display: -0.01em;
  --ls-heading: -0.005em;
  --ls-caps:    0.12em;  /* INDIE-style wide caps */
  --ls-caps-lg: 0.18em;  /* "SCHOOL & STUDIO" style */

  /* ===== Spacing (4pt grid) ===== */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;

  /* ===== Radius ===== */
  --r-0:    0px;
  --r-1:    2px;
  --r-2:    6px;
  --r-3:    10px;
  --r-4:    16px;
  --r-pill: 999px;
  --r-circle: 50%;

  /* ===== Shadows (quiet, paper-like) ===== */
  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(26, 26, 23, 0.06), 0 1px 1px rgba(26,26,23,0.04);
  --shadow-2: 0 2px 8px rgba(26, 26, 23, 0.08);
  --shadow-3: 0 12px 32px -8px rgba(26, 26, 23, 0.18);
  --shadow-ink: 4px 4px 0 var(--indie-navy-900); /* stamp-like press */

  /* ===== Motion ===== */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur:      200ms;
  --dur-slow: 400ms;
}

/* ============================================================
   Semantic element styles — apply with a simple base reset
   ============================================================ */

html {
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--fg-1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body { line-height: var(--lh-body); margin: 0; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  color: var(--fg-1);
  font-weight: 700;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-heading);
  margin: 0 0 var(--sp-4);
  text-wrap: balance;
}

h1 { font-size: var(--fs-4xl); line-height: var(--lh-tight); letter-spacing: var(--ls-display); font-weight: 800; }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }
h5 { font-size: var(--fs-md); font-weight: 600; }
h6 { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--fg-3); font-weight: 600; }

/* Display — used for brand moments, hero, signage */
.display {
  font-family: var(--font-display);
  font-size: var(--fs-5xl);
  line-height: 0.95;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

/* Wide caps — the "INDIE CAFE" / "SCHOOL & STUDIO" treatment */
.eyebrow {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps-lg);
  font-weight: 600;
  color: var(--fg-3);
}

p { margin: 0 0 var(--sp-4); color: var(--fg-2); text-wrap: pretty; }
.lede { font-size: var(--fs-md); color: var(--fg-2); line-height: var(--lh-loose); max-width: 62ch; }

small, .meta { font-size: var(--fs-sm); color: var(--fg-3); }
code, pre, kbd, samp { font-family: var(--font-mono); font-size: 0.92em; }
code { background: var(--ink-100); padding: 0.1em 0.35em; border-radius: var(--r-2); color: var(--fg-1); }

a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; transition: color var(--dur) var(--ease-out); }
a:hover { color: var(--link-hover); text-decoration-thickness: 2px; }

hr { border: 0; border-top: 1px solid var(--border-subtle); margin: var(--sp-6) 0; }

::selection { background: var(--indie-orange-100); color: var(--indie-navy-900); }

/* JP helper — opt-in class */
.jp { font-family: var(--font-jp); letter-spacing: 0.02em; }