/* ============================================================
   Keihan Design System — Colors & Type
   京阪住業株式会社 KEIHAN
   ============================================================ */

/* ------------------------------------------------------------
   Webfonts
   Brand: Roboto (variable, wdth + wght axes) — local TTFs in /fonts.
          Used for both body and display. Roboto's geometric construction
          and uniform stroke pair cleanly with the kanji 京阪住業 lockup.
   JP/CN: Noto Sans JP / SC fallbacks for kanji + simplified Chinese.
   Mono:  JetBrains Mono for tabular data (yields, prices).
   ------------------------------------------------------------ */
@font-face {
  font-family: "Roboto";
  src: url("fonts/Roboto-VariableFont_wdth_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("fonts/Roboto-Italic-VariableFont_wdth_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-stretch: 75% 125%;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Noto Sans SC";
  src: url("fonts/NotoSansSC-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&family=JetBrains+Mono:wght@400;500;700&display=swap");

:root {
  /* ============================================================
     COLOR TOKENS — Foundation
     ============================================================ */

  /* Neutral — the backbone of the brand. Cool greys, not warm. */
  --keihan-ink:        #0A0A0A;   /* near-black, primary text & logo */
  --keihan-ink-soft:   #1F1F1F;
  --keihan-fg-1:       #0A0A0A;   /* primary text */
  --keihan-fg-2:       #4A4A4A;   /* secondary text */
  --keihan-fg-3:       #8A8A8A;   /* tertiary / labels */
  --keihan-fg-4:       #B8B8B8;   /* disabled / muted */

  --keihan-paper:      #FFFFFF;   /* cards, modals */
  --keihan-bg:         #F3F4F6;   /* page background — brand mist (was #F4F4F4) */
  --keihan-bg-warm:    #EFEFEF;   /* alt page background */
  --keihan-bg-soft:    #FAFAFA;   /* very light surface */
  --keihan-line:       #E5E5E5;   /* default borders */
  --keihan-line-soft:  #EFEFEF;   /* subtle dividers */
  --keihan-line-strong:#112035;   /* hard accent lines — brand navy */

  /* ------------------------------------------------------------
     Brand primary — Deep navy from the brand application spec.
     This is the LOGO color (the hexagonal mark + 京阪住业 + KEIHAN
     wordmark are all set in #112035) and the system primary.
     Royal blue stays available as a secondary "data" accent for
     the Keynote layouts that already used it.
     ------------------------------------------------------------ */
  --keihan-navy:       #112035;   /* PRIMARY brand color — logo, headlines, key UI */
  --keihan-navy-deep:  #0A1626;   /* hover / press, deep surfaces */
  --keihan-navy-soft:  #1A2D45;   /* alt navy for body-on-navy hierarchy */
  --keihan-navy-50:    #EEF0F4;   /* tint backgrounds */
  --keihan-navy-100:   #D6DCE5;
  --keihan-navy-200:   #A8B3C2;

  /* Silver — the brand's only "shine" cue. Used for hairlines,
     dividers, low-contrast info on dark navy, and to evoke the
     foil-stamp effect on printed collateral. Never as a fill. */
  --keihan-silver:     #C9CED6;
  --keihan-silver-soft:#DCDFE5;
  --keihan-silver-deep:#9EA5B0;

  /* Mist — the brand's off-white. Used for app-icon backgrounds,
     light surfaces, and digital paper. Slightly cooler than #F4F4F4. */
  --keihan-mist:       #F3F4F6;

  /* Secondary data accent — Keynote royal blue. Reserved for
     charts and the giant numeral treatment in slides. Not a UI primary. */
  --keihan-blue:       #2D49E8;
  --keihan-blue-deep:  #1F36C2;
  --keihan-blue-50:    #EEF1FE;
  --keihan-blue-100:   #D6DDFC;
  --keihan-blue-200:   #A8B5F8;

  /* Coral — risk / "watch out" callouts only. Used sparingly. */
  --keihan-coral:      #E94B3C;
  --keihan-coral-deep: #C73828;
  --keihan-coral-50:   #FDECEA;

  /* ------------------------------------------------------------
     Semantic primary aliases — point UI components at --keihan-primary
     so the brand color can be swapped centrally if needed.
     ------------------------------------------------------------ */
  --keihan-primary:        var(--keihan-navy);
  --keihan-primary-deep:   var(--keihan-navy-deep);
  --keihan-primary-50:     var(--keihan-navy-50);
  --keihan-primary-100:    var(--keihan-navy-100);
  --keihan-primary-200:    var(--keihan-navy-200);

  /* Semantic — calmer real-estate context */
  --keihan-ok:         #16A34A;
  --keihan-warn:       #D97706;
  --keihan-bad:        var(--keihan-coral);
  --keihan-info:       var(--keihan-navy);

  /* Data viz scale (for yield charts, land-price heatmaps).
     Lead with brand navy; royal blue is a secondary tone for distinction. */
  --keihan-data-1:     #112035;   /* brand navy */
  --keihan-data-2:     #1A2D45;
  --keihan-data-3:     #4A5C76;
  --keihan-data-4:     #2D49E8;   /* secondary blue */
  --keihan-data-5:     #C9CED6;   /* silver */
  --keihan-data-6:     #E94B3C;   /* risk / coral */

  /* ============================================================
     TYPOGRAPHY TOKENS
     ============================================================ */

  --font-display: "Roboto", "Noto Sans JP", "Noto Sans SC", system-ui, sans-serif;
  --font-sans:    "Roboto", "Noto Sans JP", "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-jp:      "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-cn:      "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Type scale — generous, Keynote-derived */
  --text-display-xl: 88px;   /* hero numerals (e.g. "200+" client count) */
  --text-display-lg: 64px;
  --text-display-md: 48px;
  --text-h1:         40px;
  --text-h2:         32px;
  --text-h3:         24px;
  --text-h4:         20px;
  --text-h5:         18px;
  --text-body-lg:    18px;
  --text-body:       16px;
  --text-body-sm:    14px;
  --text-label:      13px;
  --text-caption:    12px;
  --text-micro:      11px;  /* vertical sidebar marks */

  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;

  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.12em;   /* sidebar "KEIHANJUGYO" */
  --tracking-widest:  0.2em;

  /* ============================================================
     SPACING & RADII (used in components below + UI kits)
     ============================================================ */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  --radius-none: 0;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;       /* default for buttons, inputs */
  --radius-lg: 10px;      /* cards */
  --radius-xl: 16px;
  --radius-pill: 999px;

  --shadow-1: 0 1px 2px rgba(10, 10, 10, 0.04), 0 1px 1px rgba(10, 10, 10, 0.03);
  --shadow-2: 0 4px 12px rgba(10, 10, 10, 0.06), 0 1px 2px rgba(10, 10, 10, 0.04);
  --shadow-3: 0 8px 24px rgba(10, 10, 10, 0.08), 0 2px 6px rgba(10, 10, 10, 0.04);
  --shadow-deck: 0 12px 28px rgba(17, 32, 53, 0.10), 0 4px 8px rgba(17, 32, 53, 0.04); /* Keynote card — navy-tinted */
  --shadow-inset-line: inset 4px 0 0 var(--keihan-navy); /* callout cards: left brand-navy bar */
  --shadow-inset-line-blue: inset 4px 0 0 var(--keihan-blue); /* legacy royal-blue bar (slides) */

  --ease-out: cubic-bezier(0.2, 0.7, 0.3, 1);
  --ease-in-out: cubic-bezier(0.5, 0, 0.5, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   ============================================================ */

html, body {
  font-family: var(--font-sans);
  color: var(--keihan-fg-1);
  background: var(--keihan-bg);
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-h1);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--keihan-fg-1);
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-h2);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-h3);
  line-height: var(--leading-snug);
  margin: 0;
}
h4, .h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-h4);
  line-height: var(--leading-snug);
  margin: 0;
}
h5, .h5 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-h5);
  line-height: var(--leading-snug);
  margin: 0;
}

p, .body {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-relaxed);
  color: var(--keihan-fg-1);
  margin: 0;
}

.body-lg { font-size: var(--text-body-lg); line-height: var(--leading-relaxed); }
.body-sm { font-size: var(--text-body-sm); line-height: var(--leading-normal); color: var(--keihan-fg-2); }

.label, label {
  font-family: var(--font-sans);
  font-size: var(--text-label);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  color: var(--keihan-fg-2);
  text-transform: uppercase;
}

.caption { font-size: var(--text-caption); color: var(--keihan-fg-3); }

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-label);
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--keihan-fg-3);
}

/* The vertical "KEIHANJUGYO" sidebar mark used on every slide */
.sidebar-mark {
  font-family: var(--font-sans);
  font-size: var(--text-micro);
  font-weight: 600;
  letter-spacing: var(--tracking-widest);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  color: var(--keihan-fg-1);
}

/* Display numeral — the giant "0" / "200+" / "8%" treatment from the deck.
   Default to brand navy; deck variants can opt into royal blue with .display-numeral--blue */
.display-numeral {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-display-xl);
  line-height: 0.9;
  letter-spacing: var(--tracking-tight);
  color: var(--keihan-navy);
}
.display-numeral--blue { color: var(--keihan-blue); }

code, kbd, pre, samp, .mono {
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1, "zero" 1;
}

a {
  color: var(--keihan-navy);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}
a:hover { border-bottom-color: var(--keihan-navy); }
a:active { opacity: 0.6; }

::selection { background: var(--keihan-navy); color: var(--keihan-paper); }