/* ==========================================================================
   OKINOWA · Design tokens
   colors + typography for the OKINOWA brand system.
   Theme: ocean. Horizon. Islands. Currents.
   ========================================================================== */

:root {
  /* ----- Color · Sea ------------------------------------------------------ */
  --deepest:   #061B2E;  /* deepest sea / footer */
  --deep:      #0B2A4A;  /* primary brand ink */
  --midnight:  #08243F;  /* hero gradient base */
  --navy:      #1F3A5F;  /* Estate accent */
  --ocean:     #1A4A7A;  /* mid-sea */
  --tide:      #2F7AB8;  /* link / hover / mid-water */
  --surf:      #76B3CF;  /* surface water */
  --horizon:   #B8D8E8;  /* horizon mist */
  --shore:     #E8F1F5;  /* shoreline / faint blue */
  --foam:      #F6FAFB;  /* paper-like background */
  --paper:     #FFFFFF;  /* white */

  /* ----- Color · Warm light ----------------------------------------------- */
  --sun:       #F4D58D;  /* warm horizon glow / accent */
  --sun-deep:  #E8B47A;  /* Create accent (sunset on sea) */

  /* ----- Color · Business islands ---------------------------------------- */
  --c-create:  #E89B5C;  /* warm sunset over water — AI-powered creative */
  --c-works:   #2A7B9B;  /* stable working blue — implementation, support */
  --c-estate:  #1F3A5F;  /* deep navy — land, place, rootedness */
  --c-saas:    #5BC0BE;  /* bright digital cyan — systems, software */

  /* ----- Color · Ink / type ---------------------------------------------- */
  --ink:       #0B2A4A;  /* primary body ink (= --deep) */
  --ink-2:     #2A4862;  /* secondary text */
  --ink-3:     #6F839A;  /* muted text, metadata, labels */
  --ink-4:     #A6B6C7;  /* hint text */

  /* ----- Color · Lines & semantic ---------------------------------------- */
  --line:        rgba(11, 42, 74, 0.12);
  --line-strong: rgba(11, 42, 74, 0.22);
  --line-on-dark: rgba(255, 255, 255, 0.18);

  --success:   #4FA38C;
  --warning:   #E8B47A;
  --danger:    #C05A4A;

  /* ----- Type families --------------------------------------------------- */
  --font-jp-serif: "Shippori Mincho", "Hiragino Mincho ProN", "游明朝", "Yu Mincho", serif;
  --font-jp-sans:  "Noto Sans JP", "Hiragino Sans", "Yu Gothic", system-ui, sans-serif;
  --font-en-serif: "Cormorant Garamond", "Times New Roman", serif;
  --font-en-mono:  "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ----- Type · sizes ----------------------------------------------------- */
  --fs-eyebrow:  11px;
  --fs-meta:     12px;
  --fs-body:     14px;
  --fs-body-lg:  16px;
  --fs-lead:     18px;
  --fs-h4:       20px;
  --fs-h3:       28px;
  --fs-h2:       40px;
  --fs-h1:       56px;
  --fs-display:  96px;

  /* ----- Tracking --------------------------------------------------------- */
  --tr-tight:   -0.01em;
  --tr-normal:   0em;
  --tr-jp:       0.04em;   /* Japanese display */
  --tr-en-cap:   0.08em;   /* small caps */
  --tr-eyebrow:  0.28em;
  --tr-coord:    0.22em;

  /* ----- Leading ---------------------------------------------------------- */
  --lh-tight:   1.2;
  --lh-snug:    1.4;
  --lh-body:    1.7;       /* default JP body */
  --lh-relax:   2.0;       /* JP serif paragraphs */
  --lh-loose:   2.1;

  /* ----- Radii / shadows / motion --------------------------------------- */
  --r-xs: 2px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-pill: 999px;

  --shadow-1: 0 1px 2px rgba(11, 42, 74, 0.06), 0 1px 1px rgba(11, 42, 74, 0.04);
  --shadow-2: 0 8px 24px -10px rgba(11, 42, 74, 0.18);
  --shadow-3: 0 22px 50px -10px rgba(11, 42, 74, 0.30);
  --shadow-glow: 0 14px 30px -10px rgba(244, 213, 141, 0.45);

  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --ease-in-out: cubic-bezier(.5, 0, .2, 1);
  --t-fast:   200ms;
  --t-base:   400ms;
  --t-slow:   1100ms;

  /* ----- Spacing scale --------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 160px;
}

/* ==========================================================================
   Base type — Japanese-first
   ========================================================================== */

html, body {
  font-family: var(--font-jp-sans);
  color: var(--ink);
  line-height: var(--lh-body);
}

h1, .h1 {
  font-family: var(--font-jp-serif);
  font-weight: 500;
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-jp);
  color: var(--deep);
}
h2, .h2 {
  font-family: var(--font-jp-serif);
  font-weight: 500;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-jp);
  color: var(--deep);
}
h3, .h3 {
  font-family: var(--font-jp-serif);
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--deep);
}
h4, .h4 {
  font-family: var(--font-jp-sans);
  font-weight: 600;
  font-size: var(--fs-h4);
  color: var(--deep);
}
p {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-2);
}
.lead {
  font-family: var(--font-jp-serif);
  font-size: var(--fs-lead);
  line-height: var(--lh-loose);
  color: var(--ink-2);
}
.eyebrow {
  font-family: var(--font-en-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 400;
}
.meta {
  font-family: var(--font-en-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.12em;
  color: var(--ink-3);
}
.display-jp {
  font-family: var(--font-jp-serif);
  font-weight: 400;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-jp);
}
.display-en {
  font-family: var(--font-en-serif);
  font-style: italic;
  font-weight: 400;
}
code, .mono {
  font-family: var(--font-en-mono);
  font-size: 0.92em;
}