/* ============================================================================
   Bliss Design System — Colors & Type
   ----------------------------------------------------------------------------
   Bliss Technologies: cancel-for-any-reason (CFAR) waiver platform.
   This file defines the foundational design tokens (color, type, scale) used
   across marketing, merchant dashboard, checkout widget, and consumer flows.

   Aesthetic direction: institutional fintech (Stripe / Mercury), warmed by a
   single confident coral accent inherited from the existing brand sunset.
   Avoid generic SaaS blue. Avoid gradient-heavy chrome. Editorial typography,
   generous whitespace, calm density.
   ============================================================================ */

/* English faces — still loaded from Google Fonts (Instrument Serif, Geist, Geist Mono).
   Japanese face — Noto Sans JP — self-hosted variable font from /fonts/. */
@font-face {
  font-family: 'Noto Sans JP';
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  src: url('../assets/fonts/NotoSansJP-VariableFont_wght.ttf') format('truetype-variations'),
       url('../assets/fonts/NotoSansJP-VariableFont_wght.ttf') format('truetype');
}

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&family=Noto+Serif+JP:wght@400;700&display=swap');

:root {
  /* ============ COLORS ============ */

  /* — Brand: Coral (the single confident accent, derived from the logo sunset) */
  --coral-50:  #FFF1EB;
  --coral-100: #FFDDCD;
  --coral-200: #FFBFA3;
  --coral-300: #F69A75;
  --coral-400: #ED7551;
  --coral-500: #E5634A;  /* primary brand */
  --coral-600: #C84F36;
  --coral-700: #A03B26;
  --coral-800: #6E2A1B;
  --coral-900: #3F1810;

  /* — Brand: Gold (sparing — claim approvals, callouts; never large fills) */
  --gold-100: #FBEBC1;
  --gold-300: #F2C95C;
  --gold-500: #D99A22;
  --gold-700: #8C5E10;

  /* — Ink: warm near-blacks for text. NOT pure black. */
  --ink-900: #16110E;  /* primary text */
  --ink-800: #2A2320;
  --ink-700: #3F3833;
  --ink-600: #5C534D;
  --ink-500: #7A716A;  /* secondary text */
  --ink-400: #9B9289;
  --ink-300: #BDB5AC;  /* placeholder */
  --ink-200: #DCD6CD;  /* hairline borders */
  --ink-100: #ECE7DE;  /* card borders / dividers */
  --ink-50:  #F4F0E8;  /* subtle surface tint */

  /* — Paper: warm off-whites for surfaces (never #fff) */
  --paper:        #FAF7F2;  /* default page background */
  --paper-raised: #FFFFFF;  /* raised cards */
  --paper-sunken: #F2EDE4;  /* inset wells, code blocks */

  /* — Semantic (operational; muted, institutional. Not vibrant.) */
  --success-50:  #E6F1EA;
  --success-500: #1F8A5B;
  --success-700: #0E5D3D;

  --warning-50:  #FAEFD8;
  --warning-500: #C28722;
  --warning-700: #7A5210;

  --danger-50:  #FAE7E3;
  --danger-500: #C0382B;
  --danger-700: #7A1F15;

  /* Info uses INK rather than blue — a deliberate choice to avoid SaaS-blue. */
  --info-50:  #ECE7DE;
  --info-500: #2A2320;
  --info-700: #16110E;

  /* — Semantic foreground/background tokens (USE THESE, not raw palette) */
  --fg:        var(--ink-900);
  --fg-muted:  var(--ink-500);
  --fg-subtle: var(--ink-400);
  --fg-on-coral: var(--paper-raised);
  --fg-on-ink:   var(--paper);

  --bg:        var(--paper);
  --bg-raised: var(--paper-raised);
  --bg-sunken: var(--paper-sunken);
  --bg-coral:  var(--coral-500);
  --bg-ink:    var(--ink-900);

  --border:        var(--ink-200);
  --border-strong: var(--ink-700);
  --border-subtle: var(--ink-100);
  --border-focus:  var(--coral-500);

  --accent:        var(--coral-500);
  --accent-hover:  var(--coral-600);
  --accent-active: var(--coral-700);

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

  /* — Families
     Noto Sans JP is now the primary face for the whole system — it covers
     Latin and Japanese in a single voice, so EN and JA marketing/UI no longer
     drift apart visually. Display, sans, and JP all resolve to the same face,
     differentiated by weight and tracking, not family. Mono is still Geist
     Mono — Noto Sans JP has no monospaced sibling. */
  --font-display: "Noto Sans JP", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-sans:    "Noto Sans JP", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "Geist Mono", "SF Mono", ui-monospace, Menlo, monospace;
  --font-jp:      "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  --font-jp-serif:"Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", serif;

  /* — Scale (modular, 1.25 ratio at the top, 1.2 in body sizes) */
  --text-xs:   12px;
  --text-sm:   13px;
  --text-base: 15px;   /* body */
  --text-md:   17px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  32px;
  --text-3xl:  44px;
  --text-4xl:  60px;
  --text-5xl:  84px;   /* editorial display */
  --text-6xl:  120px;  /* hero only */

  /* — Line height */
  --leading-tight:   1.05;  /* display */
  --leading-snug:    1.2;
  --leading-normal:  1.45;  /* body */
  --leading-relaxed: 1.6;   /* long-form */

  /* — Tracking (Instrument Serif likes neutral; Geist tightens at large sizes) */
  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;   /* eyebrows / ALL CAPS */
  --tracking-wider:  0.12em;   /* labels / "POWERED BY" */

  /* — Weights */
  --weight-light:  300;
  --weight-reg:    400;
  --weight-med:    500;
  --weight-semi:   600;
  --weight-bold:   700;

  /* ============ SHAPE ============ */
  --radius-xs:   4px;   /* badges, tags */
  --radius-sm:   6px;   /* inputs */
  --radius-md:   10px;  /* buttons, small cards */
  --radius-lg:   14px;  /* cards, widgets (matches FlexCancel widget) */
  --radius-xl:   20px;  /* feature cards */
  --radius-pill: 999px;

  /* ============ SHADOWS ============ */
  /* Restrained. Most surfaces use a hairline border + zero elevation.
     Shadows reserved for floating menus and the embedded checkout widget. */
  --shadow-sm:  0 1px 2px rgba(22, 17, 14, 0.04), 0 0 0 1px rgba(22, 17, 14, 0.04);
  --shadow-md:  0 4px 12px rgba(22, 17, 14, 0.06), 0 1px 2px rgba(22, 17, 14, 0.04);
  --shadow-lg:  0 12px 32px rgba(22, 17, 14, 0.08), 0 2px 4px rgba(22, 17, 14, 0.04);
  --shadow-xl:  0 24px 60px rgba(22, 17, 14, 0.12), 0 4px 8px rgba(22, 17, 14, 0.04);
  --shadow-focus: 0 0 0 3px rgba(229, 99, 74, 0.20);  /* coral focus ring */
  --shadow-inset: inset 0 1px 2px rgba(22, 17, 14, 0.05);

  /* ============ SPACING (8px base, 4px micro) ============ */
  --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;
  --space-32:  128px;

  /* ============ MOTION ============ */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast:   120ms;
  --duration-base:   200ms;
  --duration-slow:   320ms;

  /* ============ LAYOUT ============ */
  --container-narrow: 720px;   /* long-form copy */
  --container-base:   1080px;  /* docs, dashboard content */
  --container-wide:   1240px;  /* marketing */
  --container-full:   1440px;  /* hero + full-bleed */
}

/* ============================================================================
   Semantic element styles — apply these classes (or extend in your own CSS).
   Inputs, buttons, etc. live in component CSS, not here.
   ============================================================================ */

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Display — editorial serif. Reserved for hero, section titles, big numbers. */
.display, h1.display, .h-display {
  font-family: var(--font-display);
  font-weight: var(--weight-reg);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  font-size: var(--text-5xl);
  color: var(--fg);
}

.display-xl { font-size: var(--text-6xl); }
.display-lg { font-size: var(--text-5xl); }
.display-md { font-size: var(--text-4xl); }
.display-sm { font-size: var(--text-3xl); }

/* Headings — sans grotesk for everything UI. */
h1, .h1 {
  font-family: var(--font-sans);
  font-weight: var(--weight-semi);
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}

h2, .h2 {
  font-family: var(--font-sans);
  font-weight: var(--weight-semi);
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg);
}

h3, .h3 {
  font-family: var(--font-sans);
  font-weight: var(--weight-semi);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--fg);
}

h4, .h4 {
  font-family: var(--font-sans);
  font-weight: var(--weight-med);
  font-size: var(--text-md);
  line-height: var(--leading-snug);
  color: var(--fg);
}

p, .body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg);
}

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

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

/* Eyebrow — small, all-caps, tracked. Used over section titles, "POWERED BY BLISS". */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--accent);
}

/* Quote — editorial pull-quotes, customer voice */
blockquote, .quote {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-style: italic;
  line-height: var(--leading-snug);
  color: var(--fg);
  border-left: 2px solid var(--accent);
  padding-left: var(--space-6);
}

/* Caption — image captions, micro labels. */
.caption {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-reg);
  color: var(--fg-muted);
  letter-spacing: var(--tracking-normal);
}

/* Numeric — tabular figures for data-dense merchant UI */
.numeric, .tabular {
  font-family: var(--font-sans);
  font-feature-settings: "tnum" 1, "ss01" 1;
  font-variant-numeric: tabular-nums;
}

.numeric-lg {
  font-size: var(--text-2xl);
  font-weight: var(--weight-med);
  letter-spacing: var(--tracking-snug);
  font-variant-numeric: tabular-nums;
}

/* Code / data labels */
code, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-sunken);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  color: var(--ink-800);
}

a, .link {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-color: var(--ink-300);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color var(--duration-fast) var(--ease-out);
}
a:hover {
  text-decoration-color: var(--accent);
}

/* Japanese text — slightly larger size for visual parity with Latin.
   Applied at the root only. `lang` inherits, so `:lang(ja)` matches every
   element in the document: an em-based size there compounds once per nesting
   level (1.04^11 ≈ 1.54 at typical depth), and it outranks the font-size and
   font-family presentation attributes on SVG <text>. Setting it once here
   lets descendants inherit, and lets SVG keep its own type scale. */
html:lang(ja), html.ja {
  font-family: var(--font-jp);
  font-size: 1.04em;
  line-height: var(--leading-relaxed);
  letter-spacing: 0.02em;
}
html:lang(ja) .display, html.ja .display {
  font-family: var(--font-jp-serif);
}

/* Selection */
::selection {
  background: var(--coral-200);
  color: var(--ink-900);
}