/* ==========================================================================
   学生企業査定 Design System — Colors & Type
   Source of truth for tokens used across the flyer + supporting materials.
   Reflects the warm paper-print aesthetic of the Hiroshima event flyer.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@500;700;900&family=Zen+Maru+Gothic:wght@700;900&family=Fraunces:ital,wght@0,600;0,900;1,900&display=swap');

:root {
  /* ----- Palette (canonical hex values) ------------------------------------ */
  --paper:      #FFFFFF;   /* cream page background */
  --cream:      #F6F6F6;   /* warm cream fill (name section) */
  --peach:      #FFD9DB;   /* peach (soft warm tint, part-1 gradient top) */

  --ink:        #111111;   /* deep brown-black — body / borders / dark cards */
  --ink-soft:   #4A4A4A;   /* secondary text, dashed rule accents */

  --terra:      #E0181F;   /* terracotta — primary accent */
  --terra-deep: #B3121A;   /* deeper terracotta — labels, ≒ sign */

  --mustard:    #FFD9DB;   /* mustard yellow — companies card, DATE, ★ */

  --sage:       #F6F6F6;   /* sage green — bg decoration */
  --sage-deep:  #4A4A4A;   /* deep sage — part-2 accents */

  --sky:        #FFFFFF;   /* sky blue — students card */
  --sky-deep:   #4A4A4A;   /* deep sky — for-students label */

  /* ----- Semantic surfaces ------------------------------------------------- */
  --bg-page:        var(--paper);
  --bg-page-outer:  #EFEFEF;      /* the neutral tone behind the page card */
  --bg-elevated:    var(--paper);
  --bg-dark:        var(--ink);
  --bg-warm-tint:   var(--cream);

  --fg-primary:     var(--ink);
  --fg-secondary:   var(--ink-soft);
  --fg-onDark:      var(--paper);
  --fg-onAccent:    var(--paper);
  --fg-accent:      var(--terra);

  --border-strong:  var(--ink);
  --border-soft:    rgba(17,17,17,0.2);
  --border-dashed:  var(--ink-soft);

  /* ----- Typography ------------------------------------------------------- */
  --font-ja-body:    'Zen Kaku Gothic New', system-ui, sans-serif;
  --font-ja-display: 'Zen Maru Gothic', 'Zen Kaku Gothic New', sans-serif;
  --font-en-accent:  'Fraunces', 'Times New Roman', serif;

  /* Type scale — the design uses tight, print-oriented sizes */
  --fs-9:    9px;
  --fs-10:   10px;
  --fs-11:   11px;
  --fs-12:   12px;
  --fs-13:   13px;
  --fs-15:   15px;
  --fs-16:   16px;
  --fs-18:   18px;
  --fs-22:   22px;
  --fs-26:   26px;
  --fs-28:   28px;
  --fs-42:   42px;
  --fs-44:   44px;
  --fs-64:   64px;

  /* ----- Radius ---------------------------------------------------------- */
  --r-sm:   6px;    /* diagram inner */
  --r-md:   8px;    /* chips, illustrations */
  --r-lg:   12px;   /* section containers, program cards */
  --r-xl:   14px;   /* money cards */
  --r-2xl:  18px;   /* hero photo */
  --r-pill: 100px;  /* every pill / tag / badge */

  /* ----- Shadows --------------------------------------------------------- */
  --shadow-page:   0 20px 60px rgba(0,0,0,0.15);       /* preview only, drop for print */
  --shadow-hard:   5px 5px 0 var(--ink);               /* money cards — hard offset, no blur */
  --shadow-hard-sm:4px 4px 0 var(--ink);
  --shadow-title:  0 3px 20px rgba(0,0,0,0.5);         /* white text over hero photo */
  --shadow-sub:    0 2px 10px rgba(0,0,0,0.5);
  --shadow-date:   0 2px 12px rgba(0,0,0,0.5);

  /* ----- Spacing (pixel-tuned to A4, not a strict scale) ---------------- */
  --sp-1:  6px;
  --sp-2:  8px;
  --sp-3:  10px;
  --sp-4:  12px;
  --sp-5:  14px;
  --sp-6:  16px;
  --sp-7:  18px;
  --sp-8:  22px;
  --sp-9:  26px;

  /* ----- Letter spacing ------------------------------------------------- */
  --ls-tight:  -0.03em;   /* display headings */
  --ls-normal:  0;
  --ls-wide:    0.05em;
  --ls-wider:   0.1em;
  --ls-widest:  0.15em;   /* labels, English micro-copy */
  --ls-super:   0.18em;
}

/* --------------------------------------------------------------------------
   Base body — always applies when this CSS is loaded
   -------------------------------------------------------------------------- */
html, body {
  background: var(--bg-page-outer);
  color: var(--fg-primary);
  font-family: var(--font-ja-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

/* --------------------------------------------------------------------------
   Semantic type helpers — use as classes on any element
   -------------------------------------------------------------------------- */

/* Display: Japanese rounded gothic, heaviest weight, tight tracking */
.t-display-xl {
  font-family: var(--font-ja-display);
  font-weight: 900;
  font-size: var(--fs-44);
  line-height: 1.05;
  letter-spacing: var(--ls-tight);
  color: var(--fg-primary);
}
.t-display-lg {
  font-family: var(--font-ja-display);
  font-weight: 900;
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--fg-primary);
}
.t-display-md {
  font-family: var(--font-ja-display);
  font-weight: 900;
  font-size: var(--fs-18);
  line-height: 1.2;
  color: var(--fg-primary);
}
.t-display-sm {
  font-family: var(--font-ja-display);
  font-weight: 900;
  font-size: var(--fs-15);
  line-height: 1.2;
  color: var(--fg-primary);
}

/* Numeric / English accent (Fraunces italic) — used for numbers, kickers, labels */
.t-num-xl {
  font-family: var(--font-en-accent);
  font-weight: 900;
  font-size: var(--fs-64);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--fg-primary);
}
.t-num-lg {
  font-family: var(--font-en-accent);
  font-weight: 900;
  font-size: var(--fs-42);
  line-height: 0.9;
  letter-spacing: -0.02em;
}
.t-kicker {
  font-family: var(--font-en-accent);
  font-style: italic;
  font-weight: 900;
  font-size: var(--fs-13);
  letter-spacing: var(--ls-wide);
  color: var(--terra);
}
.t-label {
  /* All-caps micro-label used before sections and pills */
  font-family: var(--font-en-accent);
  font-style: italic;
  font-weight: 900;
  font-size: var(--fs-10);
  letter-spacing: var(--ls-widest);
  color: var(--terra-deep);
}
.t-eyebrow {
  /* Section eyebrow like "01 / PROGRAM" */
  font-family: var(--font-en-accent);
  font-style: italic;
  font-weight: 900;
  font-size: var(--fs-12);
  color: var(--terra);
  letter-spacing: var(--ls-wider);
}

/* Body */
.t-body {
  font-family: var(--font-ja-body);
  font-weight: 500;
  font-size: 10.5px;
  line-height: 1.6;
  color: var(--fg-secondary);
}
.t-body-strong {
  font-family: var(--font-ja-body);
  font-weight: 700;
  font-size: 10.5px;
  line-height: 1.55;
  color: var(--fg-primary);
}
.t-caption {
  font-family: var(--font-ja-body);
  font-weight: 500;
  font-size: var(--fs-10);
  line-height: 1.5;
  color: var(--fg-secondary);
}

/* Utility text weights */
.t-w-900 { font-weight: 900; }
.t-w-700 { font-weight: 700; }
.t-w-500 { font-weight: 500; }

/* Inline highlight — terracotta pill background, used behind key phrases */
.t-highlight {
  color: var(--paper);
  background: var(--terra);
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 900;
}

/* Marker-underline accent — sits behind a display word */
.t-underline-accent {
  position: relative;
  display: inline-block;
  color: var(--mustard);
}
.t-underline-accent::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 3px;
  height: 5px;
  background: var(--terra);
  opacity: 0.85;
  z-index: -1;
}