/* =========================================================================
   One Man Band India — Foundation Tokens
   Colors, type, spacing, radii, shadow, motion.
   Import this file at the top of every page in the system.

   @import url("./colors_and_type.css");
   ========================================================================= */

@import url("https://fonts.googleapis.com/css2?family=Archivo+Black&family=Teko:wght@500;600;700&family=Manrope:wght@400;500;600;700;800&family=Caveat:wght@500;700&display=swap");

:root {
  /* ---------- BRAND COLORS ------------------------------------------------ */
  /* Lifted from the logo + stage photography. The two anchors are
     "Stage Ink" (the near-black drum/logo color) and "Saffron Strike"
     (the INDIA orange). Everything else is a supporting role. */

  --c-ink:            #14171F;   /* drum-skin / logo type, primary text on light */
  --c-ink-2:          #232733;   /* secondary text on light, hairlines on ink */
  --c-ink-3:          #4A5163;   /* tertiary text, captions */

  --c-paper:          #F4EFE3;   /* warm cream — primary surface */
  --c-paper-2:        #EAE3D2;   /* sunken paper / muted card */
  --c-bone:           #FAF7EE;   /* lightest cream, near-white */
  --c-white:          #FFFFFF;

  --c-saffron:        #E07A1F;   /* INDIA — primary accent, CTAs */
  --c-saffron-deep:   #B85F12;   /* hover / pressed saffron */
  --c-saffron-soft:   #F6C893;   /* surface tint */

  /* Stage accents — drawn from concert photography. Use sparingly,
     usually only on dark surfaces with photos. */
  --c-magenta:        #E0407C;   /* spotlight pink */
  --c-electric:       #4FB8FF;   /* concert blue */
  --c-mint:           #29C48A;   /* small confirm / live indicator */
  --c-amber:          #F2B544;   /* secondary warm accent, badges */

  /* Dark surfaces — for "stage" sections and the press / book pages */
  --c-stage:          #0B0C10;   /* the deepest black, like a blacked-out stage */
  --c-stage-2:        #15171F;   /* one step lighter, panels on stage */
  --c-stage-3:        #232733;   /* hairlines on stage */
  --c-fog:            rgba(255, 255, 255, 0.06);   /* smoke wash */

  /* Foreground on dark */
  --c-on-dark:        #F4EFE3;
  --c-on-dark-2:      #BFB7A4;
  --c-on-dark-3:      #7E7868;

  /* Semantic */
  --fg:               var(--c-ink);
  --fg-muted:         var(--c-ink-2);
  --fg-soft:          var(--c-ink-3);
  --bg:               var(--c-paper);
  --bg-elev:          var(--c-bone);
  --bg-sunk:          var(--c-paper-2);
  --line:             rgba(20, 23, 31, 0.14);
  --line-strong:      rgba(20, 23, 31, 0.28);
  --accent:           var(--c-saffron);
  --accent-deep:      var(--c-saffron-deep);

  /* ---------- TYPE -------------------------------------------------------- */
  /* Display = Archivo Black (matches logo block lockup).
     Poster = Teko (tall, modern condensed sans w/ Devanagari support).
     Body   = Manrope (clean, neutral, contemporary).
     Hand   = Caveat (signature flourish — "Gladson Peter" cursive). */

  --ff-display:  "Archivo Black", "Helvetica Neue", Arial, sans-serif;
  --ff-poster:   "Teko", "Archivo Black", Impact, sans-serif;
  --ff-body:     "Manrope", "Helvetica Neue", Arial, sans-serif;
  --ff-hand:     "Caveat", "Brush Script MT", cursive;

  /* Type scale — designed for marketing surfaces. Mobile defaults; bumped on >=900px. */
  --fs-mega:     clamp(56px, 14vw, 200px);   /* hero stamps, year markers */
  --fs-h1:       clamp(40px, 7vw, 88px);
  --fs-h2:       clamp(32px, 5vw, 56px);
  --fs-h3:       clamp(24px, 3.2vw, 36px);
  --fs-h4:       18px;
  --fs-lead:     clamp(18px, 1.5vw, 22px);
  --fs-body:     16px;
  --fs-small:    14px;
  --fs-micro:    12px;

  --lh-tight:    0.95;
  --lh-snug:     1.1;
  --lh-body:     1.55;

  --ls-mega:     -0.02em;
  --ls-display:  -0.005em;
  --ls-eyebrow:  0.16em;
  --ls-body:     0;

  /* ---------- SPACING ---------------------------------------------------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 144px;

  /* ---------- RADII ------------------------------------------------------ */
  /* Brand language is mostly squared off — radii are restrained.
     Pills (full radius) are reserved for badges + chips.
     The drum-circle logo gives us license for ONE big circular crop motif. */
  --r-1: 4px;
  --r-2: 8px;
  --r-3: 14px;
  --r-4: 22px;
  --r-pill: 999px;
  --r-disc: 50%;     /* drum-skin circle */

  /* ---------- BORDERS ---------------------------------------------------- */
  --bw-1: 1px;
  --bw-2: 2px;
  --bw-3: 4px;       /* heavy "ticket stub" rules */

  /* ---------- SHADOWS ---------------------------------------------------- */
  --sh-card:   0 1px 0 rgba(20,23,31,0.06), 0 10px 24px -12px rgba(20,23,31,0.18);
  --sh-lift:   0 2px 0 rgba(20,23,31,0.08), 0 22px 40px -18px rgba(20,23,31,0.30);
  --sh-stage:  0 30px 60px -20px rgba(0,0,0,0.55);
  --sh-glow-saffron: 0 0 0 2px rgba(224,122,31,0.18), 0 12px 28px -10px rgba(224,122,31,0.45);

  /* ---------- MOTION ----------------------------------------------------- */
  --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --ease-pop:      cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:  120ms;
  --dur-base:  220ms;
  --dur-slow:  450ms;
  --dur-page:  700ms;

  /* ---------- LAYOUT ----------------------------------------------------- */
  --container:    1240px;
  --container-narrow: 960px;
  --gutter:       clamp(20px, 4vw, 56px);
}

/* =========================================================================
   Element-level resets / semantic styles
   ========================================================================= */

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 { margin: 0; font-family: var(--ff-display); font-weight: 900; line-height: var(--lh-snug); letter-spacing: var(--ls-display); text-wrap: balance; }
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--ls-mega); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; }
p  { margin: 0 0 1em; text-wrap: pretty; }
small { font-size: var(--fs-small); color: var(--fg-soft); }

a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }

/* Eyebrow — the recurring small uppercase tracked label. */
.eyebrow {
  font-family: var(--ff-body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-ink-3);
}
.eyebrow--saffron { color: var(--accent); }
.eyebrow--paper   { color: var(--c-on-dark-2); }

/* Poster headline — the loud marquee voice. */
.poster {
  font-family: var(--ff-poster);
  font-weight: 700;        /* Teko's heaviest */
  text-transform: uppercase;
  line-height: 0.86;
  letter-spacing: 0.01em;
}

/* Script accent — used sparingly, never for long copy. */
.hand {
  font-family: var(--ff-hand);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
}

/* Stage / dark utility */
.on-stage { background: var(--c-stage); color: var(--c-on-dark); }
.on-paper { background: var(--c-paper); color: var(--c-ink); }

/* Focus ring — accessible + on-brand */
:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--c-saffron); color: var(--c-bone); }