/* Carefree・Smile — Color tokens
   Single accent system: the brand orange carries every interactive signal.
   Warm ink + warm parchment keep the palette feeling natural, not printed. */
:root {
  /* ---- Brand orange (the only accent) ---- */
  --cfs-orange:        #E4720C; /* primary — sampled from the logo mark */
  --cfs-orange-deep:   #C25E08; /* press / hover-darken */
  --cfs-orange-soft:   #F49C46; /* lighter accent, on-dark links, charts */
  --cfs-orange-tint:   #FBEEE1; /* pale wash — highlight fills, callouts */
  --cfs-orange-tint-2: #F6DEC8; /* slightly deeper wash */

  /* ---- Ink (warm near-black) ---- */
  --cfs-ink:    #241818; /* headings & body — sampled from the logotype */
  --cfs-ink-70: #59504D; /* secondary text */
  --cfs-ink-45: #8C8581; /* captions, muted labels */
  --cfs-ink-25: #C4BDB9; /* disabled text */

  /* ---- Surfaces ---- */
  --cfs-white:     #FFFFFF; /* dominant canvas */
  --cfs-parchment: #FAF7F3; /* warm off-white — alternating light tiles, footer */
  --cfs-pearl:     #FCFAF8; /* near-white — secondary button fills */
  --cfs-dark:      #221C1A; /* warm near-black tile */
  --cfs-dark-2:    #2A2421; /* micro-step lighter dark tile */
  --cfs-dusk:      #594B43; /* warm soft dark — section dividers & closing (on-tone, paler) */
  --cfs-black:     #140F0E; /* true void — nav, full-bleed overlays */

  /* ---- Lines / hairlines ---- */
  --cfs-hairline: #ECE6E1;            /* 1px card borders */
  --cfs-divider:  rgba(36, 24, 24, 0.08);

  /* ---- Text on dark ---- */
  --cfs-on-dark:       #FFFFFF;
  --cfs-on-dark-muted: #C9C0BB;

  /* ---- Semantic accents (use sparingly, charts/status only) ---- */
  --cfs-positive: #2F8F5B; /* growth / 増加 */
  --cfs-caution:  #C9851F; /* watch / 注意 */
  --cfs-negative: #C0492F; /* decline / 減少 */

  /* ---- Document branding (per design-rules.md — NOT a brand second color) ---- */
  --doc-confidential: #CC0000; /* 機密表示専用。提案資料ヘッダーの「Confidential」のみ */

  /* ============ Semantic aliases (prefer these in components) ============ */
  --text-primary:      var(--cfs-ink);
  --text-secondary:    var(--cfs-ink-70);
  --text-muted:        var(--cfs-ink-45);
  --text-disabled:     var(--cfs-ink-25);
  --text-on-dark:      var(--cfs-on-dark);
  --text-on-dark-muted:var(--cfs-on-dark-muted);

  --surface-canvas:    var(--cfs-white);
  --surface-parchment: var(--cfs-parchment);
  --surface-pearl:     var(--cfs-pearl);
  --surface-dark:      var(--cfs-dark);
  --surface-dusk:      var(--cfs-dusk);
  --surface-dark-2:    var(--cfs-dark-2);
  --surface-black:     var(--cfs-black);

  --accent:        var(--cfs-orange);
  --accent-press:  var(--cfs-orange-deep);
  --accent-soft:   var(--cfs-orange-soft);
  --accent-wash:   var(--cfs-orange-tint);

  --border:        var(--cfs-hairline);
  --border-soft:   var(--cfs-divider);
}
/* Carefree・Smile — Typography tokens
   Japanese-first: generous line-height (行間) and slight positive tracking (字間)
   for comfortable reading in 提案資料 / proposal materials.
   Display = Zen Kaku Gothic New, Body = Noto Sans JP, Latin/numerals = Inter. */
:root {
  /* ---- Families ---- */
  --font-display: 'Zen Kaku Gothic New', 'Noto Sans JP', system-ui, -apple-system, sans-serif;
  --font-body:    'Noto Sans JP', 'Zen Kaku Gothic New', system-ui, -apple-system, sans-serif;
  --font-latin:   'Inter', system-ui, -apple-system, sans-serif;

  /* ---- Weights (ladder: 300 / 400 / 500 / 700) ---- */
  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;

  /* ---- Display / heading sizes (line-height tuned for JP headings) ---- */
  --t-hero:      clamp(40px, 5vw, 60px);
  --t-display:   40px;  /* slide & page titles */
  --t-title:     30px;  /* sub-section heads */
  --t-heading:   24px;  /* card / block heads */
  --t-subhead:   20px;  /* lead-in, tagline */

  /* ---- Body sizes ---- */
  --t-lead:      18px;  /* intro paragraph */
  --t-body:      16px;  /* default paragraph */
  --t-small:     14px;  /* secondary copy, captions */
  --t-fine:      12px;  /* fine print, legal */

  /* ---- Line heights ---- */
  --lh-tight:    1.32;
  --lh-heading:  1.5;
  --lh-body:     1.9;
  --lh-snug:     1.7;

  /* ---- Letter spacing (JP reads better with a touch of positive tracking) ---- */
  --ls-display:  0.01em;
  --ls-heading:  0.02em;
  --ls-body:     0.04em;
  --ls-latin:   -0.01em;
}
/* Carefree・Smile — Spacing tokens. Base unit 8px.
   Structural layout snaps to 8/16/24/32/48; sub-base values for type tuning. */
:root {
  --space-2:   2px;
  --space-4:   4px;
  --space-8:   8px;
  --space-12:  12px;
  --space-16:  16px;
  --space-20:  20px;
  --space-24:  24px;
  --space-32:  32px;
  --space-40:  40px;
  --space-48:  48px;
  --space-64:  64px;
  --space-80:  80px;
  --space-section: 80px; /* vertical padding inside a full-bleed tile */

  /* Containers */
  --container-text:  820px;  /* text-heavy reading width */
  --container-wide:  1200px; /* grids, dashboards */
  --container-max:   1440px; /* lock width */
}
/* Carefree・Smile — Radius & elevation tokens.
   Restrained: pills for actions, soft radius for cards, one real shadow. */
:root {
  /* ---- Border radius ---- */
  --radius-none: 0px;
  --radius-sm:   8px;    /* compact utility buttons, inline image */
  --radius-md:   12px;   /* inputs, chips */
  --radius-lg:   18px;   /* cards, panels */
  --radius-xl:   24px;   /* large feature cards */
  --radius-pill: 9999px; /* primary action — the brand pill */
  --radius-full: 9999px;

  /* ---- Elevation ---- */
  /* UI elevation comes from surface change + hairlines, not heavy shadow. */
  --shadow-hairline: 0 0 0 1px var(--cfs-hairline);
  --shadow-card:     0 1px 2px rgba(36, 24, 24, 0.04), 0 8px 24px rgba(36, 24, 24, 0.05);
  --shadow-raised:   0 4px 12px rgba(36, 24, 24, 0.08), 0 18px 40px rgba(36, 24, 24, 0.08);
  /* The single "weight" shadow — for imagery resting on a surface. */
  --shadow-object:   0 3px 30px 5px rgba(36, 24, 24, 0.22);

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-out:      cubic-bezier(0.0, 0.0, 0.2, 1);
  --dur-fast:   140ms;
  --dur-base:   220ms;
  --press-scale: 0.96;
}