/* =========================================================================
   SHIFT AI Slide Design System — Color + Type Tokens
   ========================================================================= */

/* Noto Sans JP via Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&display=swap');

:root {
  /* ---------- Base ---------- */
  --base:            #FFFFFF;

  /* ---------- Primary (magenta) — 0 = darkest, 9 = lightest ---------- */
  --primary-0:  #A51E6D;
  --primary-1:  #AE357C;
  --primary-2:  #B74B8A;
  --primary-3:  #C06299;
  --primary-4:  #C978A7;
  --primary-5:  #D28FB6;
  --primary-6:  #DBA5C5;
  --primary-7:  #E4BCD3;
  --primary-8:  #EDD2E2;
  --primary-9:  #F6E9F0;

  /* ---------- Secondary (teal) ---------- */
  --secondary-0: #039578;
  --secondary-1: #1CA086;
  --secondary-2: #35AA93;
  --secondary-3: #4FB5A1;
  --secondary-4: #68BFAE;
  --secondary-5: #81CABC;
  --secondary-6: #9AD5C9;
  --secondary-7: #B3DFD7;
  --secondary-8: #CDEAE4;
  --secondary-9: #E6F4F2;

  /* ---------- Neutral (black ramp) ---------- */
  --neutral-0:  #333333;
  --neutral-1:  #474747;
  --neutral-2:  #5C5C5C;
  --neutral-3:  #707070;
  --neutral-4:  #858585;
  --neutral-5:  #999999;
  --neutral-6:  #ADADAD;
  --neutral-7:  #C2C2C2;
  --neutral-8:  #D6D6D6;
  --neutral-9:  #EBEBEB;

  /* ---------- Accent gradient ---------- */
  --accent-start: #FF5757;
  --accent-end:   #8C52FF;
  --accent-gradient: linear-gradient(90deg, var(--accent-start) 0%, var(--accent-end) 100%);
  --accent-gradient-diagonal: linear-gradient(135deg, var(--accent-start) 0%, var(--accent-end) 100%);

  /* ---------- Semantic: foreground ---------- */
  --fg-strong:  var(--neutral-0);   /* primary body text */
  --fg-default: var(--neutral-1);
  --fg-muted:   var(--neutral-3);
  --fg-faint:   var(--neutral-5);
  --fg-on-dark: var(--base);
  --fg-brand:   var(--primary-0);

  /* ---------- Semantic: background ---------- */
  --bg-canvas:  var(--base);
  --bg-subtle:  var(--primary-9);
  --bg-muted:   var(--neutral-9);
  --bg-dark:    var(--neutral-0);
  --bg-brand:   var(--primary-0);
  --bg-brand-soft: var(--primary-9);

  /* ---------- Semantic: border ---------- */
  --border-faint:  var(--neutral-9);
  --border-default: var(--neutral-8);
  --border-strong: var(--neutral-6);
  --border-brand:  var(--primary-0);

  /* ---------- Typography ---------- */
  --font-sans: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Hiragino Sans',
               'Yu Gothic UI', 'Meiryo', sans-serif;

  /* size scale (px) */
  --fs-24:  24px;
  --fs-32:  32px;
  --fs-40:  40px;
  --fs-56:  56px;
  --fs-64:  64px;
  --fs-72:  72px;
  --fs-80:  80px;
  --fs-96:  96px;

  /* weights */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;
  --fw-black:   900;

  /* line-height */
  --lh-display: 1.1;
  --lh-title:   1.25;
  --lh-body:    1.5;

  /* letter-spacing */
  --ls-tight:   -0.01em;
  --ls-normal:  0;
  --ls-loose:   0.02em;

  /* ---------- Spacing (multiples of 4) ---------- */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;   /* canonical slide padding */
  --sp-30: 120px;  /* header band height */

  /* ---------- Radii ---------- */
  --radius-sm:    8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 999px;

  /* ---------- Shadows ---------- */
  --shadow-card:  0 4px 24px rgba(51, 51, 51, 0.08);
  --shadow-lift:  0 12px 40px rgba(51, 51, 51, 0.12);

  /* ---------- Layout ---------- */
  --slide-w: 1920px;
  --slide-h: 1080px;
  --slide-pad: 80px;
  --header-h:  120px;
}

/* =========================================================================
   Semantic element styles — drop these onto `.ds-*` classes or
   use via composition.
   ========================================================================= */

.ds-body {
  font-family: var(--font-sans);
  color: var(--fg-strong);
  font-size: var(--fs-24);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-loose);
  font-weight: var(--fw-regular);
}

.ds-h1 {
  font-family: var(--font-sans);
  color: var(--fg-strong);
  font-size: var(--fs-96);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-tight);
  font-weight: var(--fw-black);
}

.ds-h2 {
  font-family: var(--font-sans);
  color: var(--fg-strong);
  font-size: var(--fs-72);
  line-height: var(--lh-title);
  letter-spacing: var(--ls-tight);
  font-weight: var(--fw-bold);
}

.ds-h3 {
  font-family: var(--font-sans);
  color: var(--fg-strong);
  font-size: var(--fs-56);
  line-height: var(--lh-title);
  letter-spacing: var(--ls-normal);
  font-weight: var(--fw-bold);
}

.ds-h4 {
  font-family: var(--font-sans);
  color: var(--fg-strong);
  font-size: var(--fs-40);
  line-height: var(--lh-title);
  letter-spacing: var(--ls-normal);
  font-weight: var(--fw-bold);
}

.ds-label {
  font-family: var(--font-sans);
  color: var(--fg-muted);
  font-size: var(--fs-24);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-loose);
  font-weight: var(--fw-medium);
  text-transform: none;
}

.ds-eyebrow {
  font-family: var(--font-sans);
  color: var(--fg-brand);
  font-size: var(--fs-24);
  line-height: var(--lh-body);
  letter-spacing: 0.12em;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
}

.ds-caption {
  font-family: var(--font-sans);
  color: var(--fg-faint);
  font-size: 20px;           /* sub-scale for footnotes; not in 24+ deck scale */
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
}

.ds-stat {
  font-family: var(--font-sans);
  color: var(--fg-brand);
  font-size: 200px;
  line-height: var(--lh-display);
  letter-spacing: var(--ls-tight);
  font-weight: var(--fw-black);
  font-feature-settings: "tnum" 1;
}

.ds-gradient-text {
  background: var(--accent-gradient);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}