/* ============================================================
   OKINOWA Design Tokens
   Pale-blue, bright, friendly, modern
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;700;800&family=Zen+Kaku+Gothic+New:wght@500;700;900&display=swap');

:root {
  /* ---------- Color: brand blues (pale-leaning) ---------- */
  --blue-50:  #F2F8FE;
  --blue-100: #E4F1FD;
  --blue-200: #C7E2FB;
  --blue-300: #9CCBF6;
  --blue-400: #6FB0EE;
  --blue-500: #4F94E4;  /* primary */
  --blue-600: #357AD0;
  --blue-700: #2862AE;
  --blue-800: #224F88;
  --blue-900: #1B3F6C;

  /* ---------- Color: warm-cool support accents ---------- */
  --mint-100: #DFF6EF;
  --mint-300: #9BE0CE;
  --mint-500: #5BC4AB;   /* used for "Live" status, success */

  --sand-50:  #FBF8F2;
  --sand-100: #F4ECDB;
  --sand-300: #E6CFA0;
  --sand-500: #C9A35E;   /* used for "Coming Soon" warm accent */

  --coral-300: #FFB7AB;
  --coral-500: #F37A66;

  /* ---------- Color: neutrals ---------- */
  --ink-900: #0E1A2B;    /* primary text */
  --ink-700: #2C3A50;    /* body text */
  --ink-500: #5B6A82;    /* secondary text */
  --ink-400: #8A98AE;    /* tertiary / muted */
  --ink-300: #B7C2D2;    /* placeholder */
  --ink-200: #D8DFEA;    /* divider */
  --ink-100: #ECF1F8;    /* hairline / chip bg */
  --ink-50:  #F6F8FC;    /* subtle surface */

  --paper:   #FFFFFF;
  --canvas:  #F6F9FD;    /* page background */
  --canvas-tint: #EEF5FD;

  /* ---------- Semantic color tokens ---------- */
  --fg-1: var(--ink-900);
  --fg-2: var(--ink-700);
  --fg-3: var(--ink-500);
  --fg-muted: var(--ink-400);
  --fg-on-brand: #FFFFFF;
  --fg-link: var(--blue-600);

  --bg-1: var(--paper);
  --bg-2: var(--canvas);
  --bg-3: var(--ink-50);
  --bg-tint: var(--canvas-tint);

  --border-1: var(--ink-200);
  --border-2: var(--ink-100);
  --border-strong: var(--ink-300);

  --brand: var(--blue-500);
  --brand-strong: var(--blue-600);
  --brand-soft: var(--blue-100);

  --success: var(--mint-500);
  --warning: var(--sand-500);
  --danger:  var(--coral-500);

  /* ---------- Signature gradients ---------- */
  --grad-hero:    linear-gradient(135deg, #E4F1FD 0%, #F2F8FE 45%, #FFFFFF 100%);
  --grad-brand:   linear-gradient(135deg, #6FB0EE 0%, #4F94E4 55%, #357AD0 100%);
  --grad-brand-soft: linear-gradient(135deg, #DCEEFD 0%, #C7E2FB 100%);
  --grad-aurora:  linear-gradient(120deg, #C7E2FB 0%, #DFF6EF 45%, #F4ECDB 100%);
  --grad-sky:     linear-gradient(180deg, #F2F8FE 0%, #FFFFFF 100%);
  --grad-card-shine: linear-gradient(160deg, rgba(255,255,255,0.9) 0%, rgba(228,241,253,0.4) 100%);

  /* ---------- Typography: families ---------- */
  --font-sans: 'Manrope', 'Zen Kaku Gothic New', 'Noto Sans JP', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-display: 'Manrope', 'Zen Kaku Gothic New', 'Noto Sans JP', system-ui, sans-serif;
  --font-jp: 'Zen Kaku Gothic New', 'Noto Sans JP', system-ui, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ---------- Typography: size scale (fluid, base 16px) ---------- */
  --t-xs:    12px;
  --t-sm:    14px;
  --t-base:  16px;
  --t-md:    18px;
  --t-lg:    20px;
  --t-xl:    24px;
  --t-2xl:   30px;
  --t-3xl:   38px;
  --t-4xl:   48px;
  --t-5xl:   60px;
  --t-6xl:   76px;

  /* ---------- Typography: line heights / tracking ---------- */
  --lh-tight: 1.12;
  --lh-snug:  1.28;
  --lh-base:  1.55;
  --lh-loose: 1.75;

  --tracking-tight: -0.025em;
  --tracking-snug:  -0.01em;
  --tracking-base:  0;
  --tracking-wide:  0.04em;
  --tracking-mega:  0.14em;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;
  --fw-bold:    700;
  --fw-black:   800;

  /* ---------- Spacing scale (4px base) ---------- */
  --s-0:   0px;
  --s-1:   4px;
  --s-2:   8px;
  --s-3:   12px;
  --s-4:   16px;
  --s-5:   20px;
  --s-6:   24px;
  --s-8:   32px;
  --s-10:  40px;
  --s-12:  48px;
  --s-16:  64px;
  --s-20:  80px;
  --s-24:  96px;
  --s-32:  128px;

  /* ---------- Radius ---------- */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-2xl: 36px;
  --r-pill: 999px;

  /* ---------- Shadows: soft, layered, blue-tinted ---------- */
  --shadow-xs:  0 1px 2px rgba(27, 63, 108, 0.06);
  --shadow-sm:  0 2px 6px rgba(27, 63, 108, 0.08),
                0 1px 2px rgba(27, 63, 108, 0.05);
  --shadow-md:  0 8px 24px -8px rgba(34, 79, 136, 0.18),
                0 2px 6px rgba(27, 63, 108, 0.06);
  --shadow-lg:  0 24px 48px -16px rgba(34, 79, 136, 0.22),
                0 4px 12px rgba(27, 63, 108, 0.08);
  --shadow-xl:  0 40px 80px -24px rgba(34, 79, 136, 0.28),
                0 8px 24px rgba(27, 63, 108, 0.10);
  --shadow-brand: 0 16px 36px -10px rgba(79, 148, 228, 0.45);
  --ring-focus: 0 0 0 3px rgba(79, 148, 228, 0.30);

  /* ---------- Motion ---------- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-snap:   cubic-bezier(0.34, 1.56, 0.64, 1);  /* slight overshoot */
  --dur-fast:   140ms;
  --dur-base:   240ms;
  --dur-slow:   480ms;
  --dur-xslow:  720ms;
}

/* ============================================================
   Semantic typography classes
   ============================================================ */

.t-display {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--t-6xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
.t-h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--t-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
.t-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--t-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-1);
}
.t-h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--t-2xl);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
.t-h4 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--t-xl);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
.t-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--t-xs);
  line-height: 1;
  letter-spacing: var(--tracking-mega);
  text-transform: uppercase;
  color: var(--blue-600);
}
.t-lede {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--t-lg);
  line-height: var(--lh-loose);
  color: var(--fg-2);
}
.t-body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--t-base);
  line-height: var(--lh-base);
  color: var(--fg-2);
}
.t-small {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--t-sm);
  line-height: var(--lh-base);
  color: var(--fg-3);
}
.t-caption {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--t-xs);
  line-height: var(--lh-base);
  color: var(--fg-3);
  letter-spacing: var(--tracking-wide);
}
.t-mono {
  font-family: var(--font-mono);
  font-size: var(--t-sm);
}
.t-jp { font-family: var(--font-jp); }

/* ============================================================
   Base reset hooks for any page using these tokens
   ============================================================ */
html, body {
  font-family: var(--font-sans);
  color: var(--fg-2);
  background: var(--bg-2);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}