/* Design tokens — HAND-MAINTAINED source of truth for the app's color/radius/
   space/shadow/typography scale. Originally generated from the Figma export
   at design/tokens.json (kept in-repo as reference); edit this file directly
   going forward and keep design/tokens.json in sync by hand if it changes.
   This is the ONLY file permitted to contain raw hex. */
:root {
  /* color */
  --color-primary-primary: #2563EB;
  --color-primary-secondary: #DC2626;
  --color-primary-navigation-bg: #051430;
  --color-primary-primary-dark: #1D4ED8;
  --color-primary-primary-bright: #60A5FA;
  --color-primary-primary-very-bright: #DBEAFE;
  --color-primary-secondary-dark: #B91C1C;
  --color-primary-secondary-bright: #F87171;
  --color-primary-secondary-very-bright: #FEE2E2;
  --color-primary-surface: #FFFFFF;
  --color-semantic-extra-navigation-active: #2563EB;
  --color-semantic-extra-warning-bg: #FEF3C7;
  --color-semantic-extra-warning-text: #A16207;
  /* Metadata-group tag (Figma Tag_/Count4). A distinct golden-amber trio, not reusable from the
     existing warning/highlight pairs: the fill is deeper than --color-semantic-extra-warning-bg,
     the border is golden where --color-yellow-400 is greener, and the text is a teal-navy that no
     --color-navy-blue-* step matches in hue. Tags are not a warning state — they label which
     required-metadata groups a category ticks. */
  --color-semantic-extra-tag-bg: #FDE69C;
  --color-semantic-extra-tag-border: #FBC108;
  --color-semantic-extra-tag-text: #1C4651;
  --color-semantic-extra-highlight-bg: #FFF7ED;
  --color-semantic-extra-highlight-text: #C2410C;
  --color-semantic-extra-purple-accent-bg: #E2D6EF;
  --color-semantic-extra-purple-accent-text: #7E22CE;
  --color-semantic-extra-brown-muted-bg: #FAF7F2;
  --color-semantic-extra-brown-muted-text: #633F29;
  --color-text-base-title-content: #060D1D;
  --color-text-base-description-icon-form: #64748B;
  --color-text-base-placeholder-text: #94A3B8;
  --color-text-base-disabled-text: #71767C;
  --color-text-base-disabled-bg: #F1F5F9;
  --color-text-base-border: #E2E8F0;
  --color-text-base-background: #F8FAFF;
  --color-text-base-background-soft: #EEF5FF;
  --color-text-base-surface-muted: #F8FAFC;
  --color-text-base-white-text: #FFFFFF;
  --color-text-base-link: #2563EB;
  --color-text-base-button-cancel: #C9CFD7;
  --color-neutral-button-cancel: #64748B;
  --color-neutral-background: #F8FAFC;
  --color-neutral-background-over: #E2E8F0;
  --color-neutral-disable: #E2E6EC;
  --color-neutral-placeholder-text: #94A3B8;
  --color-neutral-description-icon-form-divider: #475569;
  --color-neutral-title-content: #0F172A;
  --color-status-success: #16A34A;
  --color-status-success-vbright: #DCFCE7;
  --color-status-waiting: #F59E0B;
  --color-status-waiting-vbright: #FEF3C7;
  /* PecToast warning-variant message text (design doc §9.2). Coincidentally matches
     --color-text-base-disabled-bg's hex value, but that token is semantically "disabled
     background" — using it for foreground text on a status-waiting fill would be the wrong
     semantic even though the colour is identical. Own alias instead of a raw hex in the
     component (2026-08-05 PecToast ADR §9.2). */
  --color-status-waiting-on-fill: #F1F5F9;
  --color-status-error: #DC2626;
  --color-status-error-vbright: #FEE2E2;
  --color-status-alert: #FACC15;
  --color-status-alert-vbright: #FEF9C3;
  --color-status-pending: #7C3AED;
  --color-status-pending-vbright: #EDE9FE;
  --color-status-info: #2563EB;
  --color-status-info-vbright: #DBEAFE;
  --color-component-card-bg: #FFFFFF;
  --color-component-card-border: #E2E8F0;
  --color-component-button-primary-bg: #2563EB;
  --color-component-button-primary-hover: #1D4ED8;
  --color-component-button-primary-text: #FFFFFF;
  --color-component-button-secondary-bg: #FEE2E2;
  --color-component-button-secondary-hover: #FECACA;
  --color-component-button-secondary-text: #B91C1C;
  --color-component-button-danger-bg: #DC2626;
  --color-component-button-danger-hover: #B91C1C;
  --color-component-button-danger-text: #FFFFFF;
  --color-component-tag-bg: #DBEAFE;
  --color-component-tag-text: #1D4ED8;
  --color-component-progress-track: #E2E8F0;
  --color-component-progress-fill: #2563EB;
  --color-component-feedback-card-bg: #FEF2F2;
  --color-component-reward-card-bg: #EFF6FF;
  --color-navy-blue-50: #F0F5FF;
  --color-navy-blue-100: #DCE8FF;
  --color-navy-blue-200: #B8D2FF;
  --color-navy-blue-300: #8AB4FF;
  --color-navy-blue-400: #5C8DF6;
  --color-navy-blue-500: #3867D6;
  --color-navy-blue-600: #274FB3;
  --color-navy-blue-700: #1F3F8F;
  --color-navy-blue-800: #193371;
  --color-navy-blue-900: #13284F;
  --color-navy-blue-950: #0A1633;
  --color-blue-50: #EFF6FF;
  --color-blue-100: #DBEAFE;
  --color-blue-200: #BFDBFE;
  --color-blue-300: #93C5FD;
  --color-blue-400: #60A5FA;
  --color-blue-500: #3B82F6;
  --color-blue-600: #2563EB;
  --color-blue-700: #1D4ED8;
  --color-blue-800: #1E40AF;
  --color-blue-900: #1E3A8A;
  --color-blue-950: #172554;
  --color-red-50: #FEF2F2;
  --color-red-100: #FEE2E2;
  --color-red-200: #FECACA;
  --color-red-300: #FCA5A5;
  --color-red-400: #F87171;
  --color-red-500: #EF4444;
  --color-red-600: #DC2626;
  --color-red-700: #B91C1C;
  --color-red-800: #991B1B;
  --color-red-900: #7F1D1D;
  --color-red-950: #450A0A;
  --color-orange-50: #FFF7ED;
  --color-orange-100: #FFEDD5;
  --color-orange-200: #FED7AA;
  --color-orange-300: #FDBA74;
  --color-orange-400: #FB923C;
  --color-orange-500: #F97316;
  --color-orange-600: #EA580C;
  --color-orange-700: #C2410C;
  --color-orange-800: #9A3412;
  --color-orange-900: #7C2D12;
  --color-orange-950: #431407;
  --color-yellow-50: #FEFCE8;
  --color-yellow-100: #FEF9C3;
  --color-yellow-200: #FEF08A;
  --color-yellow-300: #FDE047;
  --color-yellow-400: #FACC15;
  --color-yellow-500: #EAB308;
  --color-yellow-600: #CA8A04;
  --color-yellow-700: #A16207;
  --color-yellow-800: #854D0E;
  --color-yellow-900: #713F12;
  --color-yellow-950: #422006;
  --color-purple-50: #FAF5FF;
  --color-purple-100: #F3E8FF;
  --color-purple-200: #E9D5FF;
  --color-purple-300: #D8B4FE;
  --color-purple-400: #C084FC;
  --color-purple-500: #A855F7;
  --color-purple-600: #9333EA;
  --color-purple-700: #7E22CE;
  --color-purple-800: #6B21A8;
  --color-purple-900: #581C87;
  --color-purple-950: #3B0764;
  --color-brown-50: #FAF7F2;
  --color-brown-100: #F1E7D8;
  --color-brown-200: #E2CDB2;
  --color-brown-300: #D0AD86;
  --color-brown-400: #B9875A;
  --color-brown-500: #9A683D;
  --color-brown-600: #7C5030;
  --color-brown-700: #633F29;
  --color-brown-800: #4F3324;
  --color-brown-900: #3F2A20;
  --color-brown-950: #24150E;
  --color-green-50: #E8FFF0;
  --color-green-300: #CEFFE0;
  --color-green-400: #82E2A5;
  --color-green-500: #3BDE77;
  --color-green-600: #16A34A;
  --color-green-700: #148D41;
  --color-green-800: #0C5B29;
  --color-green-900: #094B21;
  --color-green-950: #063317;
  /* radius */
  --radius-none: 0;
  --radius-sm: 2px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-card: 16px;
  --radius-button: 12px;
  --radius-pill: 999px;
  --radius-modal: 20px;
  --radius-input: 10px;
  /* space */
  --space-0: 0;
  --space-px: 1px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 80px;
  --space-5xl: 96px;
  /* shadow */
  --shadow-card-soft: 0 8px 24px rgb(15 23 42 / 0.08);
  --shadow-floating-card: 0 14px 40px rgb(15 23 42 / 0.12);
  --shadow-bottom-sheet: 0 -12px 36px rgb(15 23 42 / 0.14);
  --shadow-active-state: 0 0 0 4px rgb(37 99 235 / 0.14);
  --shadow-danger-focus: 0 0 0 4px rgb(220 38 38 / 0.14);
  /* typography
     --font-size-* and --line-height-* are REM (not px), converted from the
     original px scale by dividing by 16 (the standard root font-size). This
     is deliberate for accessibility: rem tracks the user's/browser's root
     font-size preference, so text set via these tokens correctly grows with
     browser zoom / OS text-size settings (WCAG 1.4.4-adjacent). A fixed-px
     value would not scale, causing text to visually stay the same size
     under zoom while surrounding rem-based UI grows around it. line-height
     is rem too (not unitless) so it scales IN STEP with its paired
     font-size token under zoom — pairing a fixed-px line-height with a
     rem-based font-size would desync at high zoom and cause lines to
     visually collide/overlap. --radius-*/--space-*/--shadow-* remain px by
     design (no resize-text linkage on those properties); --font-weight-* is
     a unitless number; --font-family-* is a string. Do not convert those. */
  --font-family-base: "LINE Seed JP";
  --font-family-help: "Sarabun";
  --font-size-display: 3rem;
  --font-size-heading: 1.875rem;
  --font-size-summary: 1.5rem;
  --font-size-header-card: 1.375rem;
  --font-size-title: 1.25rem;
  --font-size-tab: 1.25rem;
  --font-size-button: 0.875rem;
  --font-size-base: 1rem;
  --font-size-head-table: 1rem;
  --font-size-tag: 1rem;
  --font-size-input: 1rem;
  --font-size-body: 0.875rem;
  --font-size-nav: 1rem;
  --font-size-label: 0.75rem;
  --font-size-tiny: 0.6875rem;
  --font-size-status: 0.875rem;
  --font-size-caption: 0.75rem;
  --font-size-table-line: 0.875rem;
  --font-size-texthelp: 0.5rem;
  --font-size-link: 0.5rem;
  --font-size-calendar: 0.5rem;
  --line-height-none: 1rem;
  --line-height-tight: 1.25rem;
  --line-height-snug: 1.375rem;
  --line-height-base: 1.5rem;
  --line-height-relaxed: 1.75rem;
  --line-height-loose: 2rem;
  --line-height-caption: 1.125rem;
  --line-height-display: 3.75rem;
  --line-height-heading: 2.375rem;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
}