/* ============================================================
   Temple Studios — Design Tokens (consolidated)
   Ink · Cream · Amber · Altone. Reusable theme for the Astro rebuild.
   Link this once per page: <link rel="stylesheet" href="tokens.css">
   ============================================================ */

/* Accent editorial face — italic Playfair Display (the amber "persona" words) */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@1,500;1,600&display=swap');


/* ===== colors.css ===== */
/* ============================================================
   Temple Studios — Color tokens
   Warm, cinematic, editorial. Three pillars: Ink, Cream, Amber.
   ============================================================ */
:root {
  /* ---------- Base palette ---------- */

  /* Ink — warm near-black ramp (the brand black is --ink-900) */
  --ink-950: #070605;
  --ink-900: #0E0C0B; /* BRAND: signature warm black */
  --ink-800: #18130F;
  --ink-700: #281F19;
  --ink-600: #3C2F26;
  --ink-500: #564537;
  --ink-400: #7A6553;
  --ink-300: #A08B79;
  --ink-200: #C7B7A6;
  --ink-100: #DDD2C4;

  /* Cream / paper — warm neutrals (the brand cream is --cream) */
  --bone:  #FBF9F5; /* near-white, raised cards on cream */
  --paper: #F5F0E9; /* slightly raised surface */
  --cream: #EDE7DE; /* BRAND: signature page cream */
  --shell: #E3DACE; /* sunken / hairline fills */
  --sand:  #D8CDBE; /* dividers, borders on cream */

  /* Amber — burnt-orange ramp (the brand amber is --amber-500) */
  --amber-50:  #FCF2E4;
  --amber-100: #F9E2C7;
  --amber-200: #F2C896;
  --amber-300: #EAAC66;
  --amber-400: #E2933E;
  --amber-500: #D98026; /* BRAND: signature amber */
  --amber-600: #C06A18;
  --amber-700: #9C5413;
  --amber-800: #774010;
  --amber-900: #50290A;

  /* Earthy semantic accents (muted, kept on-brand & warm) */
  --olive:  #5B7B53; /* success / open / available */
  --olive-soft: #E7ECDF;
  --brick:  #B23A2E; /* error / closed / full */
  --brick-soft: #F6DED9;

  /* ---------- Semantic aliases ---------- */

  /* Surfaces (light context) */
  --surface-page:    var(--cream);
  --surface-raised:  var(--bone);
  --surface-sunken:  var(--shell);
  --surface-muted:   var(--paper);

  /* Surfaces (dark / cinematic context) */
  --surface-ink:        var(--ink-900);
  --surface-ink-raised: var(--ink-800);
  --surface-ink-sunken: var(--ink-950);

  /* Text on light */
  --text-primary:   var(--ink-900);
  --text-secondary: var(--ink-600);
  --text-muted:     var(--ink-400);
  --text-faint:     var(--ink-300);

  /* Text on dark */
  --text-inverse:        var(--cream);
  --text-inverse-muted:  var(--ink-200);
  --text-inverse-faint:  var(--ink-400);

  /* Accent */
  --accent:        var(--amber-500);
  --accent-strong: var(--amber-600);
  --accent-press:  var(--amber-700);
  --accent-hover:  var(--amber-400);
  --accent-soft:   var(--amber-50);
  --on-accent:     var(--ink-900); /* ink reads better than white on amber */

  /* Borders & dividers — on light */
  --border-subtle:  rgba(14, 12, 11, 0.10);
  --border-default: rgba(14, 12, 11, 0.16);
  --border-strong:  rgba(14, 12, 11, 0.30);

  /* Borders & dividers — on dark */
  --border-on-ink:        rgba(237, 231, 222, 0.14);
  --border-on-ink-strong: rgba(237, 231, 222, 0.28);

  /* States */
  --focus-ring:  rgba(217, 128, 38, 0.45);
  --overlay:     rgba(7, 6, 5, 0.62);   /* scrim behind modals */
  --selection:   rgba(217, 128, 38, 0.28);

  --success: var(--olive);
  --danger:  var(--brick);
  --warning: var(--amber-600);
}


/* ===== typography.css ===== */
/* ============================================================
   Temple Studios — Typography tokens
   ALTONE everywhere (the brand typeface). Hierarchy is built from
   WEIGHT + CASE, not family: Heavy/Extra-Bold uppercase for display
   (as in the logo), Regular/Medium for text, Light Oblique lowercase
   for the editorial "persona" accent ("built for /bands/").
   ============================================================ */
:root {
  /* ---------- Families ---------- */
  --font-sans:    'Altone', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-display: 'Altone', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono:    ui-monospace, 'SFMono-Regular', 'Menlo', 'Consolas', monospace;

  /* ---------- Type scale (16px base) ---------- */
  --text-2xs:  0.6875rem; /* 11 */
  --text-xs:   0.75rem;   /* 12 */
  --text-sm:   0.875rem;  /* 14 */
  --text-base: 1rem;      /* 16 */
  --text-md:   1.125rem;  /* 18 */
  --text-lg:   1.25rem;   /* 20 */
  --text-xl:   1.5rem;    /* 24 */
  --text-2xl:  2rem;      /* 32 */
  --text-3xl:  2.5rem;    /* 40 */
  --text-4xl:  3.5rem;    /* 56 */
  --text-5xl:  4.5rem;    /* 72 */
  --text-6xl:  6rem;      /* 96 */
  --text-7xl:  8rem;      /* 128 — hero display */

  /* ---------- Weights (Altone ships the full range) ---------- */
  --weight-thin:       100;
  --weight-extralight: 200;
  --weight-light:      300;
  --weight-regular:    400;
  --weight-medium:     500;
  --weight-semibold:   600;
  --weight-bold:       700;
  --weight-extrabold:  800;
  --weight-heavy:      900;

  /* Role weights */
  --weight-display: var(--weight-extrabold); /* logo lockup weight */
  --weight-body:    var(--weight-regular);
  --weight-ui:      var(--weight-medium);

  /* ---------- Line heights ---------- */
  --leading-none:    1;
  --leading-tight:   1.04;  /* big display */
  --leading-snug:    1.16;  /* headings */
  --leading-normal:  1.55;  /* body */
  --leading-relaxed: 1.7;   /* long-form */

  /* ---------- Letter spacing ---------- */
  --tracking-tighter: -0.03em; /* huge display */
  --tracking-tight:   -0.02em; /* headings */
  --tracking-snug:    -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.14em;  /* eyebrows / uppercase labels */
  --tracking-widest:  0.26em;  /* baseline-style micro-labels (PLAY · RECORD · PRODUCE) */

  /* ---------- Semantic roles ---------- */
  --eyebrow-size:     var(--text-xs);
  --eyebrow-weight:   var(--weight-bold);
  --eyebrow-tracking: var(--tracking-wider);
}


/* ===== spacing.css ===== */
/* ============================================================
   Temple Studios — Spacing & layout tokens (4px base grid)
   ============================================================ */
:root {
  --space-0:    0;
  --space-px:   1px;
  --space-0-5:  0.125rem; /* 2  */
  --space-1:    0.25rem;  /* 4  */
  --space-1-5:  0.375rem; /* 6  */
  --space-2:    0.5rem;   /* 8  */
  --space-3:    0.75rem;  /* 12 */
  --space-4:    1rem;     /* 16 */
  --space-5:    1.25rem;  /* 20 */
  --space-6:    1.5rem;   /* 24 */
  --space-8:    2rem;     /* 32 */
  --space-10:   2.5rem;   /* 40 */
  --space-12:   3rem;     /* 48 */
  --space-16:   4rem;     /* 64 */
  --space-20:   5rem;     /* 80 */
  --space-24:   6rem;     /* 96 */
  --space-32:   8rem;     /* 128 */
  --space-40:   10rem;    /* 160 */

  /* ---------- Semantic layout ---------- */
  --gutter:           var(--space-6);   /* default gap between items */
  --section-y:        var(--space-24);  /* vertical rhythm between sections */
  --section-y-sm:     var(--space-16);
  --container-max:    1240px;           /* standard content width */
  --container-wide:   1440px;           /* full-bleed-ish */
  --container-narrow: 720px;            /* long-form / forms */
  --page-pad:         var(--space-6);   /* horizontal page padding */
}


/* ===== radii.css ===== */
/* ============================================================
   Temple Studios — Corner radius tokens
   Editorial restraint: mostly tight corners, pills only for chips.
   ============================================================ */
:root {
  --radius-none:   0;
  --radius-xs:     2px;
  --radius-sm:     4px;
  --radius-md:     6px;
  --radius-lg:     10px;
  --radius-xl:     16px;
  --radius-2xl:    24px;
  --radius-pill:   999px;
  --radius-circle: 50%;

  /* Semantic */
  --radius-button: var(--radius-md);
  --radius-input:  var(--radius-md);
  --radius-card:   var(--radius-lg);
  --radius-chip:   var(--radius-pill);
  --radius-image:  var(--radius-lg);
}


/* ===== shadows.css ===== */
/* ============================================================
   Temple Studios — Elevation & shadow tokens
   Warm, ink-tinted, low and soft. Amber glow for dark sections.
   ============================================================ */
:root {
  --shadow-xs: 0 1px 2px rgba(14, 12, 11, 0.06);
  --shadow-sm: 0 2px 6px -2px rgba(14, 12, 11, 0.10);
  --shadow-md: 0 8px 24px -8px rgba(14, 12, 11, 0.16);
  --shadow-lg: 0 20px 48px -16px rgba(14, 12, 11, 0.22);
  --shadow-xl: 0 32px 64px -24px rgba(14, 12, 11, 0.28);

  /* Focus ring (amber) */
  --shadow-focus: 0 0 0 3px var(--focus-ring);

  /* Subtle top highlight for raised surfaces */
  --shadow-inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.5);

  /* Cinematic amber glow — use on dark (ink) sections */
  --glow-amber: 0 0 0 1px rgba(217, 128, 38, 0.45), 0 10px 36px -10px rgba(217, 128, 38, 0.5);

  /* Border tokens reused for "outline as elevation" */
  --ring-default: inset 0 0 0 1px var(--border-default);
  --ring-on-ink:  inset 0 0 0 1px var(--border-on-ink);
}


/* ===== motion.css ===== */
/* ============================================================
   Temple Studios — Motion tokens
   Calm and editorial: gentle fades & lifts, no bounce.
   ============================================================ */
:root {
  --dur-fast:   120ms; /* @kind other */
  --dur:        200ms; /* @kind other */
  --dur-slow:   360ms; /* @kind other */
  --dur-slower: 600ms; /* @kind other */

  --ease-standard:   cubic-bezier(0.4, 0, 0.2, 1);   /* @kind other */
  --ease-out:        cubic-bezier(0.16, 1, 0.3, 1);  /* @kind other */
  --ease-in:         cubic-bezier(0.5, 0, 0.9, 0.3); /* @kind other */
  --ease-emphasized: cubic-bezier(0.2, 0.8, 0.2, 1); /* @kind other */

  /* Common transitions */
  --transition-colors: color var(--dur) var(--ease-standard),
                       background-color var(--dur) var(--ease-standard),
                       border-color var(--dur) var(--ease-standard); /* @kind other */
  --transition-transform: transform var(--dur) var(--ease-out); /* @kind other */
}


/* ===== base.css ===== */
/* ============================================================
   Temple Studios — Base layer
   Gentle global defaults so specimens & kits render on-brand.
   ============================================================ */
:root {
  color-scheme: light;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background-color: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--selection);
  color: var(--text-primary);
}

/* Display — heavy, tight, often uppercase (the logo voice) */
.ts-display {
  font-family: var(--font-display);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}

/* Persona accent — light oblique lowercase, the editorial counterweight
   to heavy uppercase display ("BUILT FOR /bands/"). */
.ts-accent {
  font-family: var(--font-display);
  font-weight: var(--weight-light);
  font-style: italic;
  letter-spacing: var(--tracking-snug);
  text-transform: none;
}

/* Eyebrow / micro-label */
.ts-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--eyebrow-size);
  font-weight: var(--eyebrow-weight);
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
}

/* Baseline-style spaced label (PLAY · RECORD · PRODUCE) */
.ts-baseline {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}


/* ===== fonts.css ===== */
/* ============================================================
   Temple Studios — Webfonts
   ALTONE is THE brand typeface (per the charte graphique).
   The logo is set in Altone Bold / Extra-Bold; the family ships
   nine weights + obliques. Real TTFs shipped from assets/fonts/.
   ============================================================ */

@font-face { font-family: 'Altone'; font-style: normal;  font-weight: 100; font-display: swap; src: url('assets/fonts/Altone-Thin.ttf') format('truetype'); }
@font-face { font-family: 'Altone'; font-style: italic;  font-weight: 100; font-display: swap; src: url('assets/fonts/Altone-ThinOblique.ttf') format('truetype'); }

@font-face { font-family: 'Altone'; font-style: normal;  font-weight: 200; font-display: swap; src: url('assets/fonts/Altone-ExtraLight.ttf') format('truetype'); }
@font-face { font-family: 'Altone'; font-style: italic;  font-weight: 200; font-display: swap; src: url('assets/fonts/Altone-ExtraLightOblique.ttf') format('truetype'); }

@font-face { font-family: 'Altone'; font-style: normal;  font-weight: 300; font-display: swap; src: url('assets/fonts/Altone-Light.ttf') format('truetype'); }
@font-face { font-family: 'Altone'; font-style: italic;  font-weight: 300; font-display: swap; src: url('assets/fonts/Altone-LightOblique.ttf') format('truetype'); }

@font-face { font-family: 'Altone'; font-style: normal;  font-weight: 400; font-display: swap; src: url('assets/fonts/Altone-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Altone'; font-style: italic;  font-weight: 400; font-display: swap; src: url('assets/fonts/Altone-RegularOblique.ttf') format('truetype'); }

@font-face { font-family: 'Altone'; font-style: normal;  font-weight: 500; font-display: swap; src: url('assets/fonts/Altone-Medium.ttf') format('truetype'); }
@font-face { font-family: 'Altone'; font-style: italic;  font-weight: 500; font-display: swap; src: url('assets/fonts/Altone-MediumOblique.ttf') format('truetype'); }

@font-face { font-family: 'Altone'; font-style: normal;  font-weight: 600; font-display: swap; src: url('assets/fonts/Altone-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Altone'; font-style: italic;  font-weight: 600; font-display: swap; src: url('assets/fonts/Altone-SemiBoldOblique.ttf') format('truetype'); }

@font-face { font-family: 'Altone'; font-style: normal;  font-weight: 700; font-display: swap; src: url('assets/fonts/Altone-Bold.ttf') format('truetype'); }
@font-face { font-family: 'Altone'; font-style: italic;  font-weight: 700; font-display: swap; src: url('assets/fonts/Altone-BoldOblique.ttf') format('truetype'); }

@font-face { font-family: 'Altone'; font-style: normal;  font-weight: 800; font-display: swap; src: url('assets/fonts/Altone-ExtraBold.ttf') format('truetype'); }
@font-face { font-family: 'Altone'; font-style: italic;  font-weight: 800; font-display: swap; src: url('assets/fonts/Altone-ExtraBoldOblique.ttf') format('truetype'); }

@font-face { font-family: 'Altone'; font-style: normal;  font-weight: 900; font-display: swap; src: url('assets/fonts/Altone-Heavy.ttf') format('truetype'); }
@font-face { font-family: 'Altone'; font-style: italic;  font-weight: 900; font-display: swap; src: url('assets/fonts/Altone-HeavyOblique.ttf') format('truetype'); }