/* ============================================================
   NIRAI KANAI — Colors & Type
   ニライカナイ — せどりツール / 沖縄の森と海の色で
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;500;600;700;800&family=Zen+Kaku+Gothic+New:wght@300;400;500;700;900&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap');

:root {
  /* ---------- Brand Palette ----------
     Kijimuna's forest: gajumaru bark, moss, deigo blossoms, hibiscus,
     with sea peeking through the canopy.
  */

  /* Primary — Deigo (デイゴ) vermilion blossom */
  --deigo-50:  #fdeeea;
  --deigo-100: #fbd6cd;
  --deigo-200: #f4a89a;
  --deigo-300: #ec7862;
  --deigo-400: #dd4e35;
  --deigo-500: #c93820;   /* primary brand red */
  --deigo-600: #a72a15;
  --deigo-700: #7e1f0f;
  --deigo-800: #54160a;
  --deigo-900: #2e0b05;

  /* Secondary — Mori (森) forest green */
  --mori-50:  #edf3ea;
  --mori-100: #d4e3cb;
  --mori-200: #a7c695;
  --mori-300: #77a663;
  --mori-400: #4f893e;
  --mori-500: #347026;   /* primary green */
  --mori-600: #27581c;
  --mori-700: #1d4214;
  --mori-800: #132c0d;
  --mori-900: #0a1806;

  /* Accent — Koke (苔) moss / canopy */
  --koke-100: #e4ead1;
  --koke-300: #b4bf84;
  --koke-500: #7f8a4a;

  /* Banyan bark — Gajumaru (ガジュマル) */
  --gajumaru-100: #e8dfd1;
  --gajumaru-300: #b09a7a;
  --gajumaru-500: #7a6345;
  --gajumaru-700: #4a3a24;
  --gajumaru-900: #271d11;

  /* Sea — peeking through the canopy */
  --kaiyo-100: #d6ecec;
  --kaiyo-300: #6fbebf;
  --kaiyo-500: #1f8387;
  --kaiyo-700: #0f5255;

  /* Hibiscus pink */
  --hana-100: #fde4e9;
  --hana-300: #f4a5b6;
  --hana-500: #d95772;
  --hana-700: #9e3349;

  /* Sun / shikuwasa accent */
  --taiyo-300: #eec247;
  --taiyo-500: #c08917;

  /* Sky break-through */
  --aozora-300: #9ec5d9;
  --aozora-500: #4a90b0;

  /* Bingata Yellow — 琉球紅型 yamabuki ground */
  --bingata-50:  #fef7dc;
  --bingata-100: #fbe68a;
  --bingata-200: #f8d04a;
  --bingata-300: #f4b91d;
  --bingata-500: #e89a0c;   /* primary bingata yellow */
  --bingata-700: #a86a06;

  /* Bingata Purple — 紫の牡丹 */
  --murasaki-100: #dccef0;
  --murasaki-300: #9d7ccf;
  --murasaki-500: #6b3fa0;   /* primary purple */
  --murasaki-700: #45256b;

  /* Neutrals — warm off-white canvas + sumi ink */
  --shiro:      #fbf6ec;    /* main background */
  --shiro-soft: #f5eedf;
  --kami:       #ece2cd;
  --ishi-100:   #ded1b6;
  --ishi-200:   #b8a98c;
  --ishi-300:   #8c7e63;
  --sumi-100:   #595141;
  --sumi-200:   #3a3427;
  --sumi:       #211e17;

  /* ---------- Semantic color tokens ---------- */
  --bg:          var(--shiro);
  --bg-soft:     var(--shiro-soft);
  --bg-paper:    var(--kami);
  --bg-inverse:  var(--sumi);
  --bg-forest:   var(--mori-700);

  --fg:          var(--sumi);
  --fg-muted:    var(--sumi-100);
  --fg-subtle:   var(--ishi-300);
  --fg-inverse:  var(--shiro);

  --accent:           var(--deigo-500);
  --accent-hover:     var(--deigo-600);
  --accent-soft:      var(--deigo-100);
  --accent-secondary: var(--murasaki-500);

  /* Bingata surface tokens */
  --bg-bingata:        var(--bingata-500);
  --btn-bingata:       var(--deigo-500);     /* red on yellow */
  --btn-bingata-hover: var(--deigo-600);
  --btn-murasaki:      var(--murasaki-500);  /* purple on yellow */
  --btn-murasaki-hover:var(--murasaki-700);

  --link:         var(--mori-600);
  --link-hover:   var(--deigo-500);

  --border:       rgba(58, 52, 39, 0.14);
  --border-soft:  rgba(58, 52, 39, 0.08);
  --border-strong:rgba(58, 52, 39, 0.28);

  --profit:  var(--mori-500);     /* green = profit / up */
  --loss:    var(--deigo-500);    /* red = loss / down */
  --warning: var(--taiyo-500);
  --info:    var(--kaiyo-500);

  /* ---------- Type families ---------- */
  --font-serif-jp:  'Shippori Mincho', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  --font-sans-jp:   'Zen Kaku Gothic New', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  --font-serif-en:  'Cormorant Garamond', 'Shippori Mincho', Georgia, serif;
  --font-mono:      'SFMono-Regular', ui-monospace, Menlo, monospace;

  /* ---------- Type scale ---------- */
  --fs-xs:   12px;  --fs-sm:   14px;  --fs-base: 16px;  --fs-md:   18px;
  --fs-lg:   22px;  --fs-xl:   28px;  --fs-2xl:  36px;  --fs-3xl:  48px;
  --fs-4xl:  64px;  --fs-5xl:  84px;

  --lh-tight: 1.2;  --lh-snug:  1.4;  --lh-base:  1.75;  --lh-loose: 2.0;
  --ls-tight: -0.02em;  --ls-base:  0.02em;  --ls-wide:  0.12em;  --ls-xwide: 0.3em;

  /* Spacing (4px base) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px;

  /* Radii */
  --r-xs: 2px; --r-sm: 4px; --r-md: 8px; --r-lg: 14px; --r-xl: 24px; --r-pill: 999px;

  /* Shadows — warm */
  --shadow-1: 0 1px 2px rgba(58, 42, 20, 0.06), 0 1px 1px rgba(58, 42, 20, 0.04);
  --shadow-2: 0 4px 12px rgba(58, 42, 20, 0.08), 0 1px 2px rgba(58, 42, 20, 0.05);
  --shadow-3: 0 12px 28px rgba(58, 42, 20, 0.10), 0 2px 6px rgba(58, 42, 20, 0.06);
  --shadow-4: 0 24px 56px rgba(58, 42, 20, 0.14), 0 4px 10px rgba(58, 42, 20, 0.08);
  --shadow-inset: inset 0 1px 2px rgba(58, 42, 20, 0.10);

  --ease-soft:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-warm:   cubic-bezier(0.34, 0.08, 0.16, 1);
  --dur-fast:    160ms;  --dur-base:    260ms;  --dur-slow:    480ms;

  --container: 1280px;
  --container-narrow: 760px;
}

/* ============================================================ */

.display {
  font-family: var(--font-serif-jp); font-weight: 500;
  font-size: var(--fs-5xl); line-height: 1.12; letter-spacing: -0.02em;
}
h1,.h1 { font-family: var(--font-serif-jp); font-weight: 500; font-size: var(--fs-4xl); line-height: 1.2; letter-spacing: -0.015em; margin: 0; }
h2,.h2 { font-family: var(--font-serif-jp); font-weight: 500; font-size: var(--fs-3xl); line-height: 1.3; margin: 0; }
h3,.h3 { font-family: var(--font-serif-jp); font-weight: 500; font-size: var(--fs-2xl); line-height: 1.35; margin: 0; }
h4,.h4 { font-family: var(--font-sans-jp); font-weight: 700; font-size: var(--fs-xl); line-height: 1.4; margin: 0; }
h5,.h5 { font-family: var(--font-sans-jp); font-weight: 500; font-size: var(--fs-lg); line-height: 1.5; margin: 0; }

p,.body  { font-family: var(--font-sans-jp); font-size: var(--fs-base); line-height: var(--lh-base); margin: 0; }
.lead    { font-family: var(--font-sans-jp); font-size: var(--fs-md); line-height: 1.9; }
.small,small { font-family: var(--font-sans-jp); font-size: var(--fs-sm); line-height: 1.7; color: var(--fg-muted); }
.micro   { font-size: var(--fs-xs); letter-spacing: var(--ls-wide); color: var(--fg-subtle); text-transform: uppercase; }
.eyebrow { font-family: var(--font-sans-jp); font-weight: 500; font-size: var(--fs-xs); letter-spacing: var(--ls-xwide); color: var(--accent); text-transform: uppercase; }

.num     { font-family: var(--font-serif-en); font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }

code,.mono { font-family: var(--font-mono); font-size: 0.92em; background: var(--bg-paper); padding: 2px 6px; border-radius: var(--r-sm); }

a { color: var(--link); text-decoration: none; transition: color var(--dur-fast) var(--ease-soft); }
a:hover { color: var(--link-hover); }

html, body {
  background: var(--bg); color: var(--fg);
  font-family: var(--font-sans-jp);
  font-feature-settings: "palt";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}