/*
 * nd-tokens.css — ニコルデジマ Design Tokens
 * ============================================
 * Single source of truth for all visual values.
 * Every other CSS file references these variables.
 *
 * Based on: Design_System.md §10 (consolidated root block)
 * All ★ promotions applied.
 *
 * HOW TO EDIT:
 * - Change a value here and it updates site-wide.
 * - Never use raw hex colours or pixel values in other CSS files —
 *   always reference a token from this file.
 * - If you need a new colour or spacing value, add it here first.
 */

:root {

  /* ─── SURFACE ─── */
  --paper:             #fbfaf7;    /* Primary background — body, header, cards */
  --paper-2:           #f5f2ea;    /* Tinted surface — newsletter, TOC, checklist, tag chips */

  /* ─── TEXT ─── */
  --ink:               #1a1a1a;    /* Primary text — headings, body copy */
  --ink-2:             #5a5a55;    /* Secondary text — card descriptions, nav, lede */
  --ink-3:             #9a9690;    /* Tertiary text — meta, captions, placeholders. NOT for body copy (contrast too low) */

  /* ─── BORDERS ─── */
  --hairline:          #e5e2da;    /* Primary border — solid 1px dividers */
  --hairline-2:        #efece4;    /* Secondary border — lighter row separators, dashed sidebar lines */

  /* ─── KAKI (柿) — primary accent ─── */
  --kaki:              #d96a3a;    /* Brand colour — buttons, links, active states, progress bar */
  --kaki-soft:         #fde8db;    /* Kaki pill/highlight background */
  --kaki-hover:        #bf5a2e;    /* Primary button hover state */

  /* ─── MATCHA (抹茶) — secondary accent ─── */
  --matcha:            #7a8f56;    /* Category accent — author dot, h3 bar, TOC bar, checklist */
  --matcha-soft:       #e6ebd9;    /* Matcha pill/highlight background */
  --matcha-ink:        #5e7140;    /* Darker matcha for text on matcha-soft surfaces */

  /* ─── YELLOW — article-body tertiary ─── */
  --yellow:            #f0d96a;    /* Callout border, tipbox label/code colour */
  --yellow-soft:       #fcf3c8;    /* Yellow highlight/callout background */
  --yellow-ink:        #9a7a1a;    /* Darker yellow for text on yellow-soft surfaces */

  /* ─── NEUTRALS (supplementary) ─── */
  --ink-soft:          #ebe7dd;    /* pill-ink background */
  --placeholder-from:  #e8e3d4;    /* Image placeholder gradient start */
  --placeholder-to:    #d8d2c0;    /* Image placeholder gradient end */
  --on-accent:         #ffffff;    /* Text on accent surfaces (kaki buttons, brand mark) */

  /* ─── PORTRAIT / AVATAR GRADIENTS ─── */
  --matcha-portrait:   #c5d09e;    /* Author portrait gradient end stop */
  --kaki-portrait:     #f5b58e;    /* Kaki comment avatar gradient end stop */

  /* ─── TYPOGRAPHY ─── */
  --serif:  "Noto Serif JP", "Yu Mincho", serif;
  --sans:   "Noto Sans JP", "Yu Gothic", system-ui, sans-serif;
  --mono:   "SF Mono", "Menlo", monospace;

  /* ─── SPACING SCALE ─── */
  /* Based on a 4px atomic unit. Dominant rhythm is multiples of 8. */
  --s-0:    0;
  --s-0_5:  2px;     /* pill vertical padding, micro-margins */
  --s-1:    4px;     /* hairline tweaks, brand-sub margin */
  --s-1_5:  6px;     /* tag chip padding, tight gaps */
  --s-2:    8px;     /* pill horizontal padding, meta gaps */
  --s-2_5:  10px;    /* brand inner gap, item gaps */
  --s-3:    12px;    /* sidebar grid gap, callout text gap */
  --s-3_5:  14px;    /* section title gap, author strip inner gap */
  --s-4:    16px;    /* most common — sidebar item gap, art-row meta */
  --s-4_5:  18px;    /* hero-side gap, header padding */
  --s-5:    20px;    /* card padding, callout padding */
  --s-5_5:  22px;    /* welcome card padding, tipbox padding */
  --s-6:    24px;    /* author-tags margin, breadcrumb top padding */
  --s-7:    28px;    /* TOC padding-X, article-row padding-Y */
  --s-8:    32px;    /* .wrap horizontal padding, hero h1 margin-bottom */
  --s-9:    36px;    /* newsletter padding-Y, callout margin-Y */
  --s-10:   40px;    /* article-head bottom padding */
  --s-11:   44px;    /* cover-wrap margin-bottom */
  --s-12:   48px;    /* stats padding-Y, footer-grid gap, latest-grid gap */
  --s-14:   56px;    /* author-box margin-bottom, footer top padding */
  --s-16:   64px;    /* body h2 top margin, with-side column gap, footer margin-top */
  --s-20:   80px;    /* hero column gap */
  --s-22:   88px;    /* hero padding-top, section padding-Y */
  --s-24:   96px;    /* hero padding-bottom */

  /* ─── BORDER RADIUS ─── */
  --r-pill:    3px;     /* pills, date badges, tag chips */
  --r-thumb:   4px;     /* thumbnails, pagination cells, small image corners */
  --r-ctrl:    6px;     /* buttons, inputs, brand mark, share buttons */
  --r-card:    8px;     /* card containers, callouts, TOC, toolcard */
  --r-banner:  10px;    /* newsletter banner */
  --r-circle:  999px;   /* search input pill, fully round */

  /* ─── MOTION ─── */
  --ease-soft:  cubic-bezier(0.22, 1, 0.36, 1);  /* Quick start, long settle */
  --rev-dur:    900ms;                             /* Page intro reveals, scroll reveals */
  --hover-dur:  380ms;                             /* Hover colour/opacity transitions */

  /* ─── LAYOUT ─── */
  --container-wide:    1240px;   /* .wrap — homepage, header, footer */
  --container-medium:  1100px;   /* .with-side — blog post + sidebar */
  --container-narrow:   760px;   /* .wrap-narrow — blog post reading column */

  /* ─── BREAKPOINTS ─── */
  /* CSS custom properties can't be used in @media queries directly.   */
  /* These are documented here as the canonical values.                */
  /* In @media rules, use the raw pixel values with a comment.        */
  /*   @media (max-width: 1000px) {}  -- bp-lg                       */
  /*   @media (max-width: 880px)  {}  -- bp-md                       */
  /*   @media (max-width: 640px)  {}  -- bp-sm                       */
  --bp-lg:  1000px;   /* Below this: sidebar collapses, grids simplify */
  --bp-md:   880px;   /* Below this: nav hides, mobile typography kicks in */
  --bp-sm:   640px;   /* Below this: single column, compact everything */

  /* ─── Z-INDEX ─── */
  --z-sticky:    50;    /* Sticky header (blog post only) */
  --z-progress: 100;    /* Reading progress bar */
  --z-overlay:  200;    /* Mobile nav drawer (reserved) */
}