/* ============================================================
 JVFood Design System, Tokens
 colors_and_type.css
 ------------------------------------------------------------
 - Color (navy / accent red / trust green / sand / neutrals)
 - Typography (Inter + Noto Sans JP + IBM Plex Mono + Noto Serif JP)
 - Spacing, radii, shadows, motion
 - Semantic role mappings
 ============================================================ */

/* ---------- Font loading (Google Fonts, substitutes) ---------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&family=Noto+Sans+JP:wght@400;500;700&family=Noto+Serif+JP:wght@500;600&display=swap');

:root {
 /* ============================================================
 COLOR, RAW PALETTE
 ============================================================ */

 /* Navy, institutional voice */
 --jv-navy-50: #F2F5F9;
 --jv-navy-100: #E1E8F0;
 --jv-navy-200: #B9C7D8;
 --jv-navy-300: #8AA0BA;
 --jv-navy-400: #5A7894;
 --jv-navy-500: #355275;
 --jv-navy-600: #1F3E63;
 --jv-navy-700: #133054;
 --jv-navy-800: #0B2A4A; /* primary brand */
 --jv-navy-900: #061E38;
 --jv-navy-950: #03152A;

 /* Ink, cool neutrals (text, borders, surfaces) */
 --jv-ink-0: #FFFFFF;
 --jv-ink-50: #F7F8FA;
 --jv-ink-100: #EEF1F5;
 --jv-ink-200: #E0E5EC; /* hairline borders */
 --jv-ink-300: #C2CAD5;
 --jv-ink-400: #97A1B0;
 --jv-ink-500: #6B7585; /* secondary text */
 --jv-ink-600: #4B5566;
 --jv-ink-700: #2F3847; /* body text */
 --jv-ink-800: #1B2230;
 --jv-ink-900: #0E131C;

 /* Accent red, primary CTA, verification mark, wordmark dot */
 --jv-accent-50: #FDECEF;
 --jv-accent-100: #F9CDD3;
 --jv-accent-300: #E97283;
 --jv-accent-500: #D52340;
 --jv-accent-600: #C8102E; /* primary */
 --jv-accent-700: #A60D26;
 --jv-accent-800: #82081D;

 /* Trust green, verification, success */
 --jv-trust-50: #E6F3EC;
 --jv-trust-100: #C2E2CF;
 --jv-trust-500: #14935A;
 --jv-trust-600: #0F7A4A;
 --jv-trust-700: #0B5E39;

 /* Warning amber */
 --jv-warn-50: #FDF4E3;
 --jv-warn-100: #FAE3B5;
 --jv-warn-500: #C98910;
 --jv-warn-600: #A6700A;
 --jv-warn-700: #7E5408;

 /* Sand, premium surface (washi paper hint) */
 --jv-sand-50: #FBF8F2;
 --jv-sand-100: #F6F1E8;
 --jv-sand-200: #ECE3D0;
 --jv-sand-300: #D9CBAB;

 /* Country accents, for flags / country chips only */
 --jv-flag-vn-red: #DA251D;
 --jv-flag-vn-yellow: #FFFF00;
 --jv-flag-jp-red: #BC002D;

 /* ============================================================
 COLOR, SEMANTIC ROLES
 ============================================================ */
 --color-bg: var(--jv-ink-0);
 --color-bg-soft: var(--jv-ink-50);
 --color-bg-premium: var(--jv-sand-100);
 --color-bg-inverse: var(--jv-navy-800);

 --color-fg: var(--jv-navy-800);
 --color-fg-body: var(--jv-ink-700);
 --color-fg-muted: var(--jv-ink-500);
 --color-fg-subtle: var(--jv-ink-400);
 --color-fg-on-inverse: var(--jv-ink-0);
 --color-fg-on-inverse-muted: var(--jv-navy-200);

 --color-border: var(--jv-ink-200);
 --color-border-strong: var(--jv-ink-300);
 --color-border-inverse: var(--jv-navy-700);
 --color-divider: var(--jv-ink-100);

 --color-accent: var(--jv-accent-600);
 --color-accent-hover: var(--jv-accent-700);
 --color-accent-press: var(--jv-accent-800);
 --color-accent-soft: var(--jv-accent-50);

 --color-trust: var(--jv-trust-600);
 --color-trust-soft: var(--jv-trust-50);

 --color-warn: var(--jv-warn-600);
 --color-warn-soft: var(--jv-warn-50);

 --color-danger: var(--jv-accent-600);
 --color-danger-soft: var(--jv-accent-50);

 --color-focus-ring: rgba(11, 42, 74, 0.22);
 --color-scrim: rgba(11, 42, 74, 0.40);

 /* ============================================================
 TYPOGRAPHY, FAMILIES
 ============================================================ */
 --font-sans: 'Inter', 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
 --font-jp: 'Noto Sans JP', 'Inter', sans-serif;
 --font-serif-jp: 'Noto Serif JP', 'Times New Roman', serif;
 --font-mono: 'IBM Plex Mono', 'SF Mono', Menlo, Consolas, monospace;

 /* ============================================================
 TYPOGRAPHY, SCALE (Latin)
 ------------------------------------------------------------
 Marketing display sizes top out at 72px. Product UI top is 32px.
 Line-heights tighten as size grows.
 ============================================================ */
 --fs-display-xl: 72px; --lh-display-xl: 1.05; --tr-display-xl: -0.025em;
 --fs-display-lg: 56px; --lh-display-lg: 1.08; --tr-display-lg: -0.022em;
 --fs-display-md: 44px; --lh-display-md: 1.12; --tr-display-md: -0.02em;
 --fs-h1: 32px; --lh-h1: 1.20; --tr-h1: -0.015em;
 --fs-h2: 24px; --lh-h2: 1.28; --tr-h2: -0.01em;
 --fs-h3: 20px; --lh-h3: 1.35; --tr-h3: -0.005em;
 --fs-h4: 16px; --lh-h4: 1.45; --tr-h4: 0;
 --fs-body-lg: 17px; --lh-body-lg: 1.55;
 --fs-body: 15px; --lh-body: 1.55;
 --fs-body-sm: 13px; --lh-body-sm: 1.5;
 --fs-caption: 12px; --lh-caption: 1.45;
 --fs-eyebrow: 12px; --lh-eyebrow: 1.2; --tr-eyebrow: 0.08em;

 /* Weights */
 --fw-regular: 400;
 --fw-medium: 500;
 --fw-semibold: 600;
 --fw-bold: 700;

 /* ============================================================
 SPACING, 4px base grid
 ============================================================ */
 --space-0: 0;
 --space-1: 4px;
 --space-2: 8px;
 --space-3: 12px;
 --space-4: 16px;
 --space-5: 20px;
 --space-6: 24px;
 --space-7: 32px;
 --space-8: 40px;
 --space-9: 48px;
 --space-10: 64px;
 --space-11: 80px;
 --space-12: 96px;
 --space-13: 120px;
 --space-14: 160px;

 /* ============================================================
 RADII
 ============================================================ */
 --radius-none: 0;
 --radius-sm: 4px;
 --radius-md: 6px;
 --radius-lg: 10px;
 --radius-xl: 16px;
 --radius-pill: 999px;

 /* ============================================================
 SHADOWS, restrained navy-tinted
 ============================================================ */
 --shadow-0: none;
 --shadow-1: 0 1px 2px rgba(11, 42, 74, 0.06);
 --shadow-2: 0 4px 12px rgba(11, 42, 74, 0.08), 0 1px 2px rgba(11, 42, 74, 0.04);
 --shadow-3: 0 16px 40px rgba(11, 42, 74, 0.12), 0 2px 6px rgba(11, 42, 74, 0.06);
 --shadow-focus: 0 0 0 3px var(--color-focus-ring);

 /* ============================================================
 MOTION
 ============================================================ */
 --ease-standard: cubic-bezier(0.2, 0, 0, 1);
 --ease-decel: cubic-bezier(0.2, 0.8, 0.2, 1);
 --ease-accel: cubic-bezier(0.4, 0, 1, 1);

 --dur-micro: 120ms;
 --dur-standard: 200ms;
 --dur-emphasis: 320ms;

 /* ============================================================
 LAYOUT
 ============================================================ */
 --max-content: 1280px;
 --max-table: 1440px;
 --max-prose: 720px;
 --nav-height: 64px;

 /* ============================================================
 RESPONSIVE BREAKPOINTS
 ------------------------------------------------------------
 sm: handheld (≤ 639px)
 md: tablet  (640–1023px)
 lg: desktop (1024–1279px)
 xl: wide    (≥ 1280px)
 ============================================================ */
 --bp-sm: 640px;
 --bp-md: 1024px;
 --bp-lg: 1280px;

 /* Fluid section / outer padding. Inline styles use "40px"; the
 utility class .jv-pad-x replaces that with a viewport-aware value. */
 --pad-x: clamp(16px, 4vw, 40px);
 --pad-section: clamp(40px, 7vw, 80px);
}

/* ============================================================
 ELEMENT BASE STYLES
 These map semantic tokens to common HTML elements so that any
 plain HTML rendered in this system inherits the right voice.
 ============================================================ */

html {
 font-family: var(--font-sans);
 color: var(--color-fg-body);
 background: var(--color-bg);
 font-size: var(--fs-body);
 line-height: var(--lh-body);
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-rendering: optimizeLegibility;
}

body {
 margin: 0;
 font-family: var(--font-sans);
 color: var(--color-fg-body);
 background: var(--color-bg);
}

:lang(ja), .lang-ja { font-family: var(--font-jp); }

h1, h2, h3, h4, h5, h6 {
 color: var(--color-fg);
 font-weight: var(--fw-semibold);
 margin: 0;
 text-wrap: balance;
}

h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--tr-h1); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--tr-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--tr-h3); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); }

p {
 margin: 0;
 font-size: var(--fs-body);
 line-height: var(--lh-body);
 color: var(--color-fg-body);
 text-wrap: pretty;
}

small { font-size: var(--fs-body-sm); color: var(--color-fg-muted); }

a {
 color: var(--color-fg);
 text-decoration: none;
 border-bottom: 1px solid transparent;
 transition: border-color var(--dur-micro) var(--ease-standard);
}
a:hover { border-bottom-color: currentColor; }

code, kbd, pre, .mono {
 font-family: var(--font-mono);
 font-size: 0.94em;
}

hr {
 border: 0;
 border-top: 1px solid var(--color-border);
 margin: var(--space-7) 0;
}

/* Utility display classes ------------------------------------ */
.jv-display-xl { font-size: var(--fs-display-xl); line-height: var(--lh-display-xl); letter-spacing: var(--tr-display-xl); font-weight: var(--fw-semibold); color: var(--color-fg); }
.jv-display-lg { font-size: var(--fs-display-lg); line-height: var(--lh-display-lg); letter-spacing: var(--tr-display-lg); font-weight: var(--fw-semibold); color: var(--color-fg); }
.jv-display-md { font-size: var(--fs-display-md); line-height: var(--lh-display-md); letter-spacing: var(--tr-display-md); font-weight: var(--fw-semibold); color: var(--color-fg); }
.jv-eyebrow {
 font-size: var(--fs-eyebrow); line-height: var(--lh-eyebrow);
 letter-spacing: var(--tr-eyebrow); text-transform: uppercase;
 font-weight: var(--fw-medium); color: var(--color-fg-muted);
}
.jv-mono { font-family: var(--font-mono); }
.jv-jp { font-family: var(--font-jp); }

/* ============================================================
 RESPONSIVE UTILITIES
 ------------------------------------------------------------
 These are intentionally minimal: layout still lives in component
 inline styles, but a few patterns recur often enough to warrant
 a class. The useViewport() hook handles the rest.
 ============================================================ */

.jv-pad-x { padding-left: var(--pad-x); padding-right: var(--pad-x); }
.jv-pad-section-y { padding-top: var(--pad-section); padding-bottom: var(--pad-section); }
.jv-container { max-width: var(--max-content); margin-left: auto; margin-right: auto; width: 100%; box-sizing: border-box; }

/* Auto-fit card grid. No breakpoints needed — the grid reflows. */
.jv-cards-auto { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.jv-cards-auto-sm { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.jv-cards-auto-lg { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

/* Horizontal-scroll wrapper for data tables on narrow viewports.
 Cards / tables placed inside keep their authored width and the
 user can swipe instead of seeing a broken layout. */
.jv-x-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.jv-x-scroll > table { min-width: 640px; }

/* Mobile-only hamburger drawer, off-canvas */
.jv-drawer-scrim {
 position: fixed; inset: 0; background: var(--color-scrim);
 z-index: 90; opacity: 0; pointer-events: none;
 transition: opacity var(--dur-standard) var(--ease-standard);
}
.jv-drawer-scrim[data-open="true"] { opacity: 1; pointer-events: auto; }

.jv-drawer {
 position: fixed; top: 0; right: 0; bottom: 0;
 width: min(320px, 86vw);
 background: #fff;
 z-index: 95;
 box-shadow: var(--shadow-3);
 transform: translateX(100%);
 transition: transform var(--dur-emphasis) var(--ease-standard);
 display: flex; flex-direction: column;
 overflow-y: auto;
}
.jv-drawer[data-open="true"] { transform: translateX(0); }

/* Visibility helpers */
@media (max-width: 1023px) {
 .jv-hide-md-down { display: none !important; }
}
@media (min-width: 1024px) {
 .jv-hide-md-up { display: none !important; }
}
@media (max-width: 639px) {
 .jv-hide-sm-down { display: none !important; }
}
@media (min-width: 640px) {
 .jv-hide-sm-up { display: none !important; }
}

/* Tabs that overflow horizontally on small screens.
 Applied to the existing inline-style tab strips by wrapping. */
.jv-tabs-scroll {
 overflow-x: auto;
 -webkit-overflow-scrolling: touch;
 scrollbar-width: none;
}
.jv-tabs-scroll::-webkit-scrollbar { display: none; }

/* Type tightening at the smallest viewports — display headings only,
 product UI stays at its authored size. */
@media (max-width: 639px) {
 .jv-display-xl { font-size: clamp(40px, 11vw, 56px); line-height: 1.08; }
 .jv-display-lg { font-size: clamp(34px, 9vw, 44px); line-height: 1.1; }
 .jv-display-md { font-size: clamp(30px, 8vw, 38px); line-height: 1.12; }
}