/* ============================================================
   IPPUN PROJECT — Design Tokens
   css/tokens.css
   ============================================================ */

:root {

  /* -- COLOURS ------------------------------------------------ */

  /* Primary */
  --color-charcoal:        #1A1A1A;
  --color-warm-white:      #F5F5F0;
  --color-pure-white:      #FFFFFF;

  /* Accent */
  --color-crimson:         #8B0000;
  --color-crimson-hover:   #A00000;

  /* Secondary */
  --color-slate:           #4A5568;
  --color-stone:           #E8E8E4;
  --color-mid-gray:        #D0D0CC;
  --color-light-stone:     #F0F0EC;

  /* Premium (Ippun+ only) */
  --color-gold:            #C9A766;
  --color-gold-dark:       #A8834A;

  /* Semantic aliases */
  --text-primary:          var(--color-charcoal);
  --text-secondary:        var(--color-slate);
  --text-on-dark:          var(--color-pure-white);
  --text-accent:           var(--color-crimson);
  --bg-page:               var(--color-warm-white);
  --bg-section:            var(--color-stone);
  --bg-dark:               var(--color-charcoal);
  --border-default:        var(--color-mid-gray);
  --border-accent:         var(--color-crimson);

  /* -- TYPOGRAPHY --------------------------------------------- */

  --font-serif:    'DM Serif Display', Georgia, serif;
  --font-sans:     'DM Sans', system-ui, sans-serif;
  --font-jp:       'Noto Sans JP', sans-serif;

  /* Sizes */
  --text-display:  72px;
  --text-h1:       48px;
  --text-h2:       36px;
  --text-h3:       24px;
  --text-body-lg:  18px;
  --text-body:     16px;
  --text-caption:  13px;
  --text-eyebrow:  11px;
  --text-label:    12px;

  /* Line heights */
  --lh-display:    1.05;
  --lh-h1:         1.1;
  --lh-h2:         1.15;
  --lh-h3:         1.2;
  --lh-body-lg:    1.75;
  --lh-body:       1.65;
  --lh-caption:    1.5;

  /* Letter spacing */
  --ls-display:    -0.025em;
  --ls-h1:         -0.02em;
  --ls-h2:         -0.015em;
  --ls-h3:         -0.01em;
  --ls-eyebrow:     0.2em;
  --ls-label:       0.1em;
  --ls-wordmark:    0.18em;

  /* -- SPACING (4px base grid) -------------------------------- */

  --space-1:    4px;
  --space-2:    8px;
  --space-3:    12px;
  --space-4:    16px;
  --space-5:    20px;
  --space-6:    24px;
  --space-7:    32px;
  --space-8:    40px;
  --space-9:    48px;
  --space-10:   64px;
  --space-11:   80px;
  --space-12:   96px;
  --space-section: 120px;   /* THE MA PRINCIPLE — never reduce */
  --space-14:   160px;
  --space-15:   240px;

  /* -- BORDER RADIUS ------------------------------------------ */

  --radius-none:   0px;     /* DEFAULT — always */
  --radius-subtle: 2px;     /* Badges, tags only */
  --radius-pill:   100px;   /* Filter pills only */

  /* -- BORDERS ------------------------------------------------ */

  --border-hairline:    1px;
  --border-default-w:   1.5px;
  --border-accent-w:    2px;
  --border-pull-quote:  3px;
  --border-footer:      2px;

  /* -- SHADOWS ------------------------------------------------ */

  --shadow-none:         none;
  --shadow-card-hover:   0 8px 24px -4px rgba(26, 26, 26, 0.08);
  --shadow-nav:          0 1px 8px 0 rgba(26, 26, 26, 0.04);
  --shadow-video:        0 16px 48px -8px rgba(26, 26, 26, 0.2);

  /* -- TRANSITIONS -------------------------------------------- */

  --transition-instant:  100ms ease-out;
  --transition-fast:     150ms ease-out;
  --transition-default:  200ms ease-out;
  --transition-medium:   300ms ease-out;
  --transition-slow:     500ms ease-out;

  /* -- GRID --------------------------------------------------- */

  --grid-max-width:    1280px;
  --grid-content-width: 1120px;
  --grid-gutter:       24px;
  --grid-margin:       80px;

  /* -- COMPONENT SIZES ---------------------------------------- */

  --btn-height:         48px;
  --btn-padding-h:      32px;
  --input-height:       52px;
  --nav-height-desktop: 64px;
  --nav-height-mobile:  56px;
  --card-padding:       32px;

}

/* -- MOBILE TOKEN OVERRIDES ----------------------------------- */
@media (max-width: 768px) {
  :root {
    --text-display:    40px;
    --text-h1:         32px;
    --text-h2:         26px;
    --text-h3:         20px;
    --grid-margin:     20px;
    --space-section:   64px;   /* Reduced on mobile */
    --card-padding:    24px;
  }
}