/* =============================================================
   塾選 (Jukusen) — Color & Type Tokens
   ----------------------------------------------------------------
   Single source of truth. Two layers:
     1. Primitive scales  — every brand and sub-hue, 50 → 1000.
     2. Semantic vars     — fg/bg/border/text/link/etc.
     3. Type tokens       — sizes, weights, line-heights.
     4. Utility classes   — .h2, .p-md, .highlight-text …
   Reference: uploads/jukusen-design-guidelines.md  + Figma file.
   ============================================================= */

:root {
  /* ----------------------------------------------------------------
     1.  PRIMITIVE COLOR SCALES
     ---------------------------------------------------------------- */

  /* Brand — Main (Blue). "600" is the canonical default. */
  --main-50:   #F4F9FF;
  --main-100:  #E2ECFF;
  --main-200:  #CAD7FF;
  --main-300:  #ADC8FF;
  --main-400:  #87B2FF;
  --main-500:  #559FFF;
  --main-600:  #1A73E8;   /* primary brand blue */
  --main-700:  #1765BF;
  --main-800:  #0744CC;   /* deep CTA blue (Figma top-30: #0044CC) */
  --main-900:  #0741AA;
  --main-1000: #03337C;

  /* Brand — Accent (Orange). "600" is canonical. */
  --accent-50:   #FFF9F0;
  --accent-100:  #FFF2D8;
  --accent-200:  #FFE6C9;
  --accent-300:  #FFD0BD;
  --accent-400:  #FFB890;
  --accent-500:  #FF8B3D;
  --accent-600:  #FF6600;   /* primary accent (Figma) */
  --accent-700:  #E96400;
  --accent-800:  #B84A00;
  --accent-900:  #7A3300;
  --accent-1000: #482300;

  /* Neutral — used for text, dividers, neutral surfaces.
     Figma's "Neutral" ramp is pure-grey on a near-white → near-black axis. */
  --neutral-50:   #FFFFFF;
  --neutral-100:  #F9F9F9;
  --neutral-200:  #EFEFEF;
  --neutral-300:  #DBDBDB;
  --neutral-400:  #C9C9C9;
  --neutral-500:  #9B9B9B;
  --neutral-600:  #6B6B6B;
  --neutral-700:  #4D4D4D;
  --neutral-800:  #303136;   /* canonical body-text color */
  --neutral-900:  #2C2C2C;
  --neutral-1000: #1A1A1A;

  /* Base — same family as Neutral but cooler / page-surface bias. */
  --base-50:   #F1F1F1;
  --base-100:  #EFF0F1;
  --base-200:  #DFE2E6;
  --base-300:  #C9C9C9;
  --base-400:  #A4A6B1;
  --base-500:  #777E89;
  --base-600:  #5B6270;
  --base-700:  #43495A;
  --base-800:  #353A47;
  --base-900:  #2F3138;
  --base-1000: #2C2C2C;

  /* ---- Sub-color hues (50–1000 ramps; only the canonical 600 + supporting tones listed) ---- */

  /* Yellow — highlight / notice. */
  --yellow-50:  #FFFCEC;
  --yellow-100: #FFFBD9;
  --yellow-200: #FFF7A8;
  --yellow-300: #FFF398;
  --yellow-400: #FFEC66;
  --yellow-500: #FFCD1A;
  --yellow-600: #FFB100;
  --yellow-700: #D69500;
  --yellow-800: #9C6E00;
  --yellow-900: #6B4B00;
  --yellow-1000:#3A2900;

  /* Light Orange — sub-accent / pickup. */
  --light-orange-50:  #FFF8F2;
  --light-orange-100: #FFEFE0;
  --light-orange-200: #FFE0C7;
  --light-orange-300: #FFD0A7;
  --light-orange-400: #FFC180;
  --light-orange-500: #FFA055;
  --light-orange-600: #FF9100;
  --light-orange-700: #D67800;
  --light-orange-800: #A35A00;
  --light-orange-900: #7A4200;
  --light-orange-1000:#4A2800;

  /* Bronze — rank-3 medal. */
  --bronze-50:  #FAEFE9;
  --bronze-100: #F7E0D6;
  --bronze-200: #F4D4C7;
  --bronze-300: #EFC7AB;
  --bronze-400: #E5BB8E;
  --bronze-500: #D7A572;
  --bronze-600: #C76F08;
  --bronze-700: #A65B00;
  --bronze-800: #864300;
  --bronze-900: #5D2F00;
  --bronze-1000:#3B1E00;

  /* Red — error / warning. */
  --red-50:   #FFF6F3;
  --red-100:  #FFE5E0;
  --red-200:  #FFD0C8;
  --red-300:  #FFB2A6;
  --red-400:  #FF8A78;
  --red-500:  #FF5F47;
  --red-600:  #D50E0E;
  --red-700:  #B30A0A;
  --red-800:  #8B0606;
  --red-900:  #680000;
  --red-1000: #420000;

  /* Pink — 合格 (passed) positive. */
  --pink-50:   #FFF4F4;
  --pink-100:  #FFE0E2;
  --pink-200:  #FFC8CC;
  --pink-300:  #FFB1B7;
  --pink-400:  #FFAAA0;
  --pink-500:  #FF8493;
  --pink-600:  #F95C75;
  --pink-700:  #D8344B;
  --pink-800:  #B0203B;
  --pink-900:  #7A1428;
  --pink-1000: #4A0B18;

  /* Green — 成功 / merit. */
  --green-50:   #EFF9F6;
  --green-100:  #DFF1ED;
  --green-200:  #BFE4DC;
  --green-300:  #9BD4C5;
  --green-400:  #6FC3AE;
  --green-500:  #43AE9F;
  --green-600:  #079765;
  --green-700:  #057A51;
  --green-800:  #045E3E;
  --green-900:  #033E29;
  --green-1000: #022217;

  /* Light Blue — info / supplementary. */
  --light-blue-50:  #F2FAFF;
  --light-blue-100: #E0F2FF;
  --light-blue-200: #C7E7FF;
  --light-blue-300: #9ED4FF;
  --light-blue-400: #6CBCFB;
  --light-blue-500: #38A4F2;
  --light-blue-600: #0090DA;
  --light-blue-700: #0073B2;
  --light-blue-800: #00568A;
  --light-blue-900: #00385C;
  --light-blue-1000:#001E33;

  /* Dark Slate — slate / generic grey. */
  --dark-slate-50:   #F3F5F9;
  --dark-slate-100:  #DDE2EC;
  --dark-slate-200:  #C2CAD8;
  --dark-slate-300:  #A4ACB7;
  --dark-slate-400:  #828A98;
  --dark-slate-500:  #5F6776;
  --dark-slate-600:  #444C5C;
  --dark-slate-700:  #353C49;
  --dark-slate-800:  #262C36;
  --dark-slate-900:  #1A1F26;
  --dark-slate-1000: #0E1117;

  /* Brand fixed colors (for completeness — equivalent to Main/Accent 600). */
  --brand-blue:   var(--main-600);
  --brand-orange: var(--accent-600);
  --brand-white:  #FFFFFF;
  --brand-black:  #000000;
  /* Logo body colors from the wordmark sub-paths. */
  --logo-blue:    #2C66A8;
  --logo-yellow:  #ECCB60;

  /* ----------------------------------------------------------------
     2.  SEMANTIC TOKENS
     ---------------------------------------------------------------- */

  /* Surfaces */
  --bg-page:        #FFFFFF;
  --bg-section:     #F9F9F9;
  --bg-card:        #FFFFFF;
  --bg-card-soft:   #F1F1F1;
  --bg-overlay:     rgba(0, 0, 0, 0.40);

  /* Foreground / text */
  --fg-1: var(--neutral-800);     /* body — #303136 */
  --fg-2: var(--neutral-500);     /* secondary — #9B9B9B */
  --fg-3: var(--neutral-400);     /* hint / disabled */
  --fg-on-color: #FFFFFF;         /* text on filled blue/orange button */

  /* Borders */
  --border-default: var(--neutral-300);  /* #DBDBDB */
  --border-subtle:  var(--base-100);     /* #EFF0F1 */
  --border-input:   var(--base-200);     /* #DFE2E6 */
  --border-strong:  var(--neutral-700);

  /* Links + interactive */
  --link:           var(--main-600);
  --link-visited:   var(--main-800);
  --primary:        var(--main-600);
  --primary-press:  var(--main-700);
  --secondary:      #FFFFFF;
  --secondary-fg:   var(--neutral-800);
  --secondary-border: var(--neutral-300);
  --tertiary-fg:    var(--main-600);

  /* Status / semantic */
  --bg-highlight-100: var(--yellow-100);
  --bg-highlight-200: #FFF7A8;
  --bg-highlight-300: #FFF398;
  --bg-highlight-400: #FFCD1A;
  --border-highlight: #FFD338;

  --text-err:   var(--red-600);
  --bg-err:     #FFF1F3;
  --border-err: var(--red-300);

  --text-merit-green:  var(--green-600);
  --text-merit-orange: var(--accent-600);
  --text-demerit:      var(--neutral-500);

  /* "合格" passed = pink ring; "未合格" failed = green ring (Figma convention) */
  --bg-passed:     var(--pink-50);
  --border-passed: var(--pink-600);
  --bg-failed:     var(--green-50);
  --border-failed: var(--green-600);

  /* Tags */
  --tag-blue-bg:   var(--main-100);
  --tag-blue-text: var(--main-800);
  --tag-green-bg:  var(--green-100);
  --tag-green-text:var(--green-800);
  --tag-orange-bg: var(--accent-200);
  --tag-orange-text:var(--accent-800);

  /* Seasonal */
  --bg-spring:     #FFE4F0;  --text-spring:  #C73E78; --border-spring: #F18BB1;
  --bg-summer:     #DAF1FF;  --text-summer:  #0F75B5; --border-summer: #6AB9E9;
  --bg-winter:     #E5F5FA;  --text-winter:  #007FA9; --border-winter: #5FCBE7;

  /* Gradients */
  --gradient-blue:   linear-gradient(180deg, var(--main-500) 0%, var(--main-700) 100%);
  --gradient-orange: linear-gradient(180deg, var(--accent-500) 0%, var(--accent-700) 100%);
  --gradient-cm:     linear-gradient(180deg, #FFFFFF 0%, #FFFBD9 100%); /* CM-gallery wash */

  /* Highlight-text (marker style for inline emphasis) */
  --highlight-text-bg: linear-gradient(transparent 50%, #FFF39A 0%);

  /* ----------------------------------------------------------------
     3.  RADIUS & SHADOW (matched to Figma tokens)
     ---------------------------------------------------------------- */
  --radius-sm:  3px;   /* tags / badges */
  --radius-md:  5px;   /* buttons, small cards */
  --radius-lg:  10px;  /* cards, modals */
  --radius-pill:9999px;

  --shadow-header: 0 1px 0 0 rgba(0,0,0,0.06), 0 2px 6px 0 rgba(0,0,0,0.04);
  --shadow-card-1: 0 1px 2px rgba(0,0,0,0.06);
  --shadow-card-2: 0 2px 6px rgba(0,0,0,0.08);
  --shadow-card-3: 0 4px 12px rgba(0,0,0,0.10);
  --shadow-card-4: 0 6px 20px rgba(0,0,0,0.12);
  --shadow-card-5: 0 12px 36px rgba(0,0,0,0.14);

  /* ----------------------------------------------------------------
     4.  SPACING SCALE
     ---------------------------------------------------------------- */
  --space-1:  1px;
  --space-2:  2px;
  --space-3:  3px;
  --space-4:  4px;
  --space-6:  6px;
  --space-8:  8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;

  /* ----------------------------------------------------------------
     5.  TYPE
     ---------------------------------------------------------------- */
  --font-sans:
    "Zen Kaku Gothic New",
    -apple-system, BlinkMacSystemFont,
    "Hiragino Sans",
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic UI", "Yu Gothic",
    "Segoe UI", Helvetica, Arial,
    sans-serif;

  --fw-normal: 300;
  --fw-bold:   700;

  /* Headings (px, line-height, letter-spacing) */
  --fs-h-24: 24px; --lh-h-24: 1.5; --ls-h-24: 0.03em;
  --fs-h-22: 22px; --lh-h-22: 1.5; --ls-h-22: 0.03em;
  --fs-h-20: 20px; --lh-h-20: 1.4; --ls-h-20: 0.03em;
  --fs-h-18: 18px; --lh-h-18: 1.4; --ls-h-18: 0.03em;
  --fs-h-17: 17px; --lh-h-17: 1.4; --ls-h-17: 0;
  --fs-h-16: 16px; --lh-h-16: 1.4; --ls-h-16: 0;
  --fs-h-15: 15px; --lh-h-15: 1.4; --ls-h-15: 0;
  --fs-h-14: 14px; --lh-h-14: 1.5; --ls-h-14: 0;
  --fs-h-13: 13px; --lh-h-13: 1.4; --ls-h-13: 0;
  --fs-h-12: 12px; --lh-h-12: 1.4; --ls-h-12: 0;
  --fs-h-11: 11px; --lh-h-11: 1.4; --ls-h-11: 0;

  /* Body (SP / PC variants) */
  --fs-p-sm: 12px;
  --fs-p-md: 14px;
  --fs-p-lg: 15px;
  --fs-p-xl: 16px;
  --lh-p-sp: 1.6;
  --lh-p-pc: 1.7;

  /* Buttons (bold) */
  --fs-btn-sm: 14px; --lh-btn-sm: 1.3; --ls-btn-sm: 0.05em;
  --fs-btn-md: 16px; --lh-btn-md: 1.4; --ls-btn-md: 0;
  --fs-btn-lg: 18px; --lh-btn-lg: 1.3; --ls-btn-lg: 0.03em;

  /* ============================================================
     TYPOGRAPHY SYSTEM (新・役割別スケール — 2026-05-23 制定)
     役割を明示した変数。今後の新規スタイルは原則これを参照する。
     最低サイズ:
       - 本文 14px (--fs-body-sm)
       - カード内タイトル 15px (--fs-title-sm)
       - 統計数値 18px (--fs-stat-sm)
       - ラベル系のみ 11-12px 許容（タグ・badge・eyebrow）
     ============================================================ */

  /* Body — 本文系 */
  --fs-body-xs:    13px;  /* キャプション・補足（最小許容・タグ列を除く） */
  --fs-body-sm:    14px;  /* 本文最低サイズ */
  --fs-body-md:    15px;  /* 本文標準 */
  --fs-body-lg:    16px;  /* 本文大 */
  --fs-body-xl:    17px;  /* 本文強調 */

  /* Title — カード/ブロック内の見出し */
  --fs-title-sm:   15px;  /* カード内タイトル小 */
  --fs-title-md:   16px;  /* カード内タイトル標準 */
  --fs-title-lg:   18px;  /* カード内見出し大 */
  --fs-title-xl:   20px;  /* セクションサブ見出し */

  /* Heading — セクション/ページ見出し */
  --fs-h2:         24px;  /* セクション見出し標準 */
  --fs-h2-lg:      28px;  /* セクション見出し大 */
  --fs-h1:         32px;  /* ページタイトル */
  --fs-h1-lg:      36px;  /* ヒーロー見出し */

  /* Statistic — 数値強調（Helveticaで描画されることが多い） */
  --fs-stat-sm:    18px;  /* 補助数値（最低強調サイズ） */
  --fs-stat-md:    24px;  /* 中数値（カードメトリクス） */
  --fs-stat-lg:    32px;  /* 大数値（メリットポイント） */
  --fs-stat-xl:    44px;  /* 巨大数値（ヒーロー%値） */

  /* Label — タグ/バッジ/eyebrow（オールキャップス・letter-spacing前提） */
  --fs-label-sm:   11px;  /* タグ最小 */
  --fs-label-md:   12px;  /* ラベル標準 */

  /* Line heights */
  --lh-tight:      1.3;   /* 大見出し */
  --lh-base:       1.5;   /* 標準 */
  --lh-relaxed:    1.7;   /* 本文 */
  --lh-loose:      1.9;   /* 本文長文 */

  /* Letter spacing */
  --ls-tight:     -0.01em;
  --ls-normal:     0;
  --ls-wide:       0.02em;
  --ls-widest:     0.05em;
}

/* =============================================================
   Base element styles + utility classes
   ============================================================= */

html, body {
  font-family: var(--font-sans);
  color: var(--fg-1);
  background: var(--bg-page);
  font-weight: var(--fw-normal);
  -webkit-font-smoothing: antialiased;
  text-size-adjust: 100%;
}

a { color: var(--link); text-decoration: none; }
a:hover { opacity: 0.8; }

/* Heading utility classes */
.h-24, .h2 { font-size: var(--fs-h-24); line-height: var(--lh-h-24); letter-spacing: var(--ls-h-24); font-weight: var(--fw-bold); color: var(--fg-1); }
.h-22       { font-size: var(--fs-h-22); line-height: var(--lh-h-22); letter-spacing: var(--ls-h-22); font-weight: var(--fw-bold); color: var(--fg-1); }
.h-20, .h3  { font-size: var(--fs-h-20); line-height: var(--lh-h-20); letter-spacing: var(--ls-h-20); font-weight: var(--fw-bold); color: var(--fg-1); }
.h-18       { font-size: var(--fs-h-18); line-height: var(--lh-h-18); letter-spacing: var(--ls-h-18); font-weight: var(--fw-bold); color: var(--fg-1); }
.h-17, .h4  { font-size: var(--fs-h-17); line-height: var(--lh-h-17); font-weight: var(--fw-bold); color: var(--fg-1); }
.h-16, .h5  { font-size: var(--fs-h-16); line-height: var(--lh-h-16); font-weight: var(--fw-bold); color: var(--fg-1); }
.h-15       { font-size: var(--fs-h-15); line-height: var(--lh-h-15); font-weight: var(--fw-bold); color: var(--fg-1); }
.h-14       { font-size: var(--fs-h-14); line-height: var(--lh-h-14); font-weight: var(--fw-bold); color: var(--fg-1); }
.h-13       { font-size: var(--fs-h-13); line-height: var(--lh-h-13); font-weight: var(--fw-bold); color: var(--fg-1); }
.h-12       { font-size: var(--fs-h-12); line-height: var(--lh-h-12); font-weight: var(--fw-bold); color: var(--fg-1); }

/* Body utility classes */
.p-sm { font-size: var(--fs-p-sm); line-height: var(--lh-p-sp); }
.p-md { font-size: var(--fs-p-md); line-height: var(--lh-p-sp); }
.p-lg { font-size: var(--fs-p-lg); line-height: var(--lh-p-sp); }
.p-xl { font-size: var(--fs-p-xl); line-height: var(--lh-p-sp); }
.p-pc-md { font-size: 16px; line-height: var(--lh-p-pc); }
.p-pc-lg { font-size: 15px; line-height: var(--lh-p-pc); }

/* Marker-style highlight (for inline emphasis runs) */
.highlight-text {
  background: var(--highlight-text-bg);
  padding: 0 2px;
  font-weight: var(--fw-bold);
}

/* Tiny "無料" pill (used inside CTAs) */
.badge-free {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-white); color: var(--main-700);
  font-size: 11px; font-weight: var(--fw-bold); line-height: 1.1;
  padding: 2px 5px; border-radius: var(--radius-sm);
  letter-spacing: 0;
  writing-mode: vertical-rl;
  text-orientation: upright;
}