/*
 * JRN.digital — Design System
 * colors_and_type.css
 *
 * Accent colour: #E6AD02  (R230 G173 B2 — confirmed by client)
 * Body font:     Apple SD Gothic Neo Bold (local, fonts/ directory)
 * Display font:  Syne (Google Fonts — recommended pairing for headers)
 *
 * NOTE: Only the Bold weight of Apple SD Gothic Neo has been provided.
 * For Regular/Light body text, Apple SD Gothic Neo falls back to system sans.
 * Request additional weights from the brand kit if needed.
 */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&display=swap');

/* Apple SD Gothic Neo — full family */
@font-face {
  font-family: 'AppleSDGothicNeo';
  src: url('fonts/AppleSDGothicNeoRegular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'AppleSDGothicNeo';
  src: url('fonts/AppleSDGothicNeoMedium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'AppleSDGothicNeo';
  src: url('fonts/AppleSDGothicNeoBold.woff2') format('woff2'),
       url('fonts/AppleSDGothicNeoBold.woff')  format('woff'),
       url('fonts/AppleSDGothicNeoBold.ttf')   format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'AppleSDGothicNeo';
  src: url('fonts/AppleSDGothicNeoExtraBold.otf') format('opentype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'AppleSDGothicNeo';
  src: url('fonts/AppleSDGothicNeoHeavy.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ─────────────────────────────────────────────────────────
   BASE COLOR TOKENS
──────────────────────────────────────────────────────────── */
:root {
  /* Brand palette */
  --jrn-black:        #1A1A1A;
  --jrn-off-black:    #2C2C2C;
  --jrn-accent:       #E6AD02;   /* R230 G173 B2 — confirmed */
  --jrn-accent-dark:  #B88A00;
  --jrn-accent-light: #F5C420;
  --jrn-white:        #FFFFFF;
  --jrn-off-white:    #F5F5F2;

  /* Neutral scale */
  --jrn-grey-100: #F5F5F2;
  --jrn-grey-200: #E8E8E4;
  --jrn-grey-300: #D0D0CB;
  --jrn-grey-400: #AAAAAA;
  --jrn-grey-500: #888888;
  --jrn-grey-600: #666666;
  --jrn-grey-700: #444444;
  --jrn-grey-800: #2C2C2C;
  --jrn-grey-900: #1A1A1A;

  /* ─────────────────────────────────────────────────────────
     SEMANTIC COLOR TOKENS
  ──────────────────────────────────────────────────────────── */
  --bg-page:        var(--jrn-white);
  --bg-surface:     var(--jrn-off-white);
  --bg-surface-2:   var(--jrn-grey-200);
  --bg-inverse:     var(--jrn-black);
  --bg-accent:      var(--jrn-accent);

  --fg-primary:     var(--jrn-black);
  --fg-secondary:   var(--jrn-grey-600);
  --fg-muted:       var(--jrn-grey-400);
  --fg-inverse:     var(--jrn-white);
  --fg-accent:      var(--jrn-accent);

  --border-light:   var(--jrn-grey-200);
  --border-default: var(--jrn-grey-300);
  --border-strong:  var(--jrn-grey-600);
  --border-inverse: rgba(255,255,255,0.15);

  --interactive-primary:       var(--jrn-black);
  --interactive-primary-hover: var(--jrn-off-black);
  --interactive-accent:        var(--jrn-accent);
  --interactive-accent-hover:  var(--jrn-accent-dark);

  /* ─────────────────────────────────────────────────────────
     TYPOGRAPHY TOKENS
  ──────────────────────────────────────────────────────────── */

  /* Font families */
  --font-display: 'Syne', 'Helvetica Neue', Arial, sans-serif;
  /* Display / headlines — Syne (Google Fonts, free)
     Geometric with distinctive editorial character.
     Recommended weights: 700 (Bold), 800 (ExtraBold) for display. */

  --font-sans:    'AppleSDGothicNeo', 'Apple SD Gothic Neo', 'Helvetica Neue', Arial, sans-serif;
  /* Body / UI — Apple SD Gothic Neo — full family available:
     400 Regular · 500 Medium · 700 Bold · 800 ExtraBold · 900 Heavy */

  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  /* Font weights */
  --fw-light:       300;
  --fw-regular:     400;
  --fw-medium:      500;
  --fw-semibold:    600;
  --fw-bold:        700;
  --fw-extrabold:   800;

  /* Type scale (modular, base 16px, ratio ~1.333) */
  --text-xs:    0.75rem;    /* 12px */
  --text-sm:    0.875rem;   /* 14px */
  --text-base:  1rem;       /* 16px */
  --text-md:    1.125rem;   /* 18px */
  --text-lg:    1.25rem;    /* 20px */
  --text-xl:    1.5rem;     /* 24px */
  --text-2xl:   2rem;       /* 32px */
  --text-3xl:   2.5rem;     /* 40px */
  --text-4xl:   3.5rem;     /* 56px */
  --text-5xl:   5rem;       /* 80px */
  --text-6xl:   7rem;       /* 112px */

  /* Line heights */
  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.7;

  /* Letter spacing */
  --ls-tight:   -0.03em;
  --ls-normal:  0;
  --ls-wide:    0.05em;
  --ls-wider:   0.1em;
  --ls-widest:  0.2em;

  /* ─────────────────────────────────────────────────────────
     SPACING TOKENS
  ──────────────────────────────────────────────────────────── */
  --space-1:    0.25rem;   /* 4px */
  --space-2:    0.5rem;    /* 8px */
  --space-3:    0.75rem;   /* 12px */
  --space-4:    1rem;      /* 16px */
  --space-5:    1.25rem;   /* 20px */
  --space-6:    1.5rem;    /* 24px */
  --space-8:    2rem;      /* 32px */
  --space-10:   2.5rem;    /* 40px */
  --space-12:   3rem;      /* 48px */
  --space-16:   4rem;      /* 64px */
  --space-20:   5rem;      /* 80px */
  --space-24:   6rem;      /* 96px */
  --space-32:   8rem;      /* 128px */

  /* ─────────────────────────────────────────────────────────
     RADIUS TOKENS
  ──────────────────────────────────────────────────────────── */
  --radius-none:  0;
  --radius-sm:    2px;
  --radius-md:    4px;
  --radius-lg:    8px;
  --radius-xl:    16px;
  --radius-full:  9999px;

  /* ─────────────────────────────────────────────────────────
     SHADOW / ELEVATION
  ──────────────────────────────────────────────────────────── */
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.08);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.10);
  --shadow-lg:  0 12px 32px rgba(0,0,0,0.12);
  --shadow-xl:  0 24px 64px rgba(0,0,0,0.16);

  /* ─────────────────────────────────────────────────────────
     TRANSITIONS
  ──────────────────────────────────────────────────────────── */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:    cubic-bezier(0.7, 0, 0.84, 0);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast:   150ms;
  --duration-base:   250ms;
  --duration-slow:   400ms;
}

/* ─────────────────────────────────────────────────────────
   SEMANTIC TYPOGRAPHIC ELEMENTS
──────────────────────────────────────────────────────────── */

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-5xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-primary);
  text-wrap: balance;
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-primary);
  text-wrap: balance;
}

h3, .h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-2xl);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
  color: var(--fg-primary);
}

h4, .h4 {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--text-xl);
  line-height: var(--lh-snug);
  color: var(--fg-primary);
}

h5, .h5 {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--text-lg);
  line-height: var(--lh-snug);
  color: var(--fg-primary);
}

h6, .h6 {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--fg-secondary);
}

p, .body {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
  color: var(--fg-primary);
}

.body-sm { font-size: var(--text-sm); line-height: var(--lh-relaxed); }
.body-lg { font-size: var(--text-md); line-height: var(--lh-relaxed); }

.label {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--text-xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--fg-secondary);
}

.eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--text-xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--fg-accent);
}

code, .code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--bg-surface);
  padding: 0.15em 0.4em;
  border-radius: var(--radius-sm);
  color: var(--fg-primary);
}

.caption {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
}