/* ============================================================================
   PLAISIRIA Design System — Foundations
   colors_and_type.css

   Built on the Wanted Design System foundation (Pretendard typeface, atomic +
   semantic color architecture). Primary brand hue: Blue 50 (#0066FF).
   Load this file first; every other artifact in the system depends on it.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. FONT FACE  —  Pretendard (variable)
   The one provided weight axis covers 45–920. We pin static aliases for clarity.
--------------------------------------------------------------------------- */
/* Self-hosted Pretendard as a single VARIABLE woff2 covering the full weight
   axis (100–900). One file (~2 MB) replaces nine static .woff weights (~9.7 MB),
   keeping standalone/inlined HTML exports small. font-weight: 45 920 is the
   typeface's native axis range; any 100–900 value the UI requests interpolates. */
@font-face {
  font-family:"Pretendard";
  font-weight:45 920;
  font-style:normal;
  font-display:swap;
  src:url("fonts/PretendardVariable.woff2") format("woff2-variations");
}

:root {
  /* =========================================================================
     2. ATOMIC PALETTE  —  raw color scales (never reference directly in product
        UI; use the semantic tokens in §3). Scales run light → dark.
     ========================================================================= */

  /* Neutral (pure gray) */
  --color-neutral-99:#F7F7F7; --color-neutral-95:#DCDCDC; --color-neutral-90:#C4C4C4;
  --color-neutral-80:#B0B0B0; --color-neutral-70:#9B9B9B; --color-neutral-60:#8A8A8A;
  --color-neutral-50:#737373; --color-neutral-40:#5C5C5C; --color-neutral-30:#474747;
  --color-neutral-20:#303030; --color-neutral-15:#2A2A2A; --color-neutral-10:#1C1C1C;
  --color-neutral-05:#171717; --color-neutral-00:#000000;

  /* Cool Neutral (blue-tinted gray — the system's working neutral) */
  --color-coolNeutral-99:#F7F7F8; --color-coolNeutral-98:#F4F4F5; --color-coolNeutral-97:#EAEBEC;
  --color-coolNeutral-96:#E1E2E4; --color-coolNeutral-95:#DBDCDF; --color-coolNeutral-90:#C2C4C8;
  --color-coolNeutral-80:#AEB0B6; --color-coolNeutral-70:#989BA2; --color-coolNeutral-60:#878A93;
  --color-coolNeutral-50:#70737C; --color-coolNeutral-40:#5A5C63; --color-coolNeutral-30:#46474C;
  --color-coolNeutral-25:#37383C; --color-coolNeutral-23:#333438; --color-coolNeutral-22:#2E2F33;
  --color-coolNeutral-20:#292A2D; --color-coolNeutral-17:#212225; --color-coolNeutral-15:#1B1C1E;
  --color-coolNeutral-12:#171719; --color-coolNeutral-10:#141415; --color-coolNeutral-07:#0F0F10;
  --color-coolNeutral-00:#000000;

  /* Blue — PRIMARY brand hue */
  --color-blue-99:#F7FBFF; --color-blue-95:#EAF2FE; --color-blue-90:#C9DEFE;
  --color-blue-80:#9EC5FF; --color-blue-70:#69A5FF; --color-blue-65:#4F95FF;
  --color-blue-60:#3385FF; --color-blue-55:#1A75FF; --color-blue-50:#0066FF;
  --color-blue-45:#005EEB; --color-blue-40:#0054D1; --color-blue-30:#003E9C;
  --color-blue-20:#002966; --color-blue-10:#001536;

  /* Red — negative / destructive */
  --color-red-99:#FFFAFA; --color-red-95:#FEECEC; --color-red-90:#FED5D5;
  --color-red-80:#FFB5B5; --color-red-70:#FF8C8C; --color-red-60:#FF6363;
  --color-red-50:#FF4242; --color-red-40:#E52222; --color-red-30:#B20C0C;
  --color-red-20:#750404; --color-red-10:#3B0101;

  /* Green — positive / success */
  --color-green-99:#F2FFF6; --color-green-95:#D9FFE6; --color-green-90:#ACFCC7;
  --color-green-80:#7DF5A5; --color-green-70:#49E57D; --color-green-60:#1ED45A;
  --color-green-50:#00BF40; --color-green-40:#009632; --color-green-30:#006E25;
  --color-green-20:#004517; --color-green-10:#00240C;

  /* Orange — cautionary / warning */
  --color-orange-99:#FFFCF7; --color-orange-95:#FEF4E6; --color-orange-90:#FEE6C6;
  --color-orange-80:#FFD49C; --color-orange-70:#FFC06E; --color-orange-60:#FFA938;
  --color-orange-50:#FF9200; --color-orange-40:#D47800; --color-orange-30:#9C5800;
  --color-orange-20:#663A00; --color-orange-10:#361E00;

  /* Cyan — accent / informative-alt */
  --color-cyan-99:#F7FEFF; --color-cyan-90:#B5F4FF; --color-cyan-70:#57DFF7;
  --color-cyan-50:#00BDDE; --color-cyan-40:#0098B2; --color-cyan-30:#006F82;

  /* Violet — accent (data-viz, marketing) */
  --color-violet-99:#FBFAFF; --color-violet-90:#DBD3FE; --color-violet-70:#9E86FC;
  --color-violet-50:#6541F2; --color-violet-40:#4F29E5; --color-violet-30:#3A16C9;

  /* Purple — accent (data-viz, marketing) */
  --color-purple-99:#FEFBFF; --color-purple-90:#F2D6FF; --color-purple-70:#DE96FF;
  --color-purple-50:#CB59FF; --color-purple-40:#AD36E3; --color-purple-30:#861CB8;

  /* Static (never invert across themes) */
  --color-static-white:#FFFFFF;
  --color-static-black:#000000;

  /* =========================================================================
     3. SEMANTIC TOKENS  —  light theme (default). Reference THESE in product UI.
        Built largely from coolNeutral + black/white at fixed opacities, mirroring
        the source system's label / line / fill architecture.
     ========================================================================= */

  /* Primary */
  --primary-normal:        #0066FF;   /* blue-50 */
  --primary-strong:        #005EEB;   /* blue-45 */
  --primary-heavy:         #0054D1;   /* blue-40 */
  --primary-bg:            #EAF2FE;   /* blue-95 — tinted surface */

  /* Label (text) — coolNeutral on white at descending opacity */
  --label-normal:          rgba(0,0,0,0.88);
  --label-strong:          rgba(0,0,0,1);
  --label-neutral:         rgba(46,47,51,0.88);
  --label-alternative:     rgba(55,56,60,0.61);
  --label-assistive:       rgba(55,56,60,0.28);
  --label-disable:         rgba(55,56,60,0.16);

  /* Background surfaces */
  --background-normal:     #FFFFFF;
  --background-alternative: #F7F7F8;  /* coolNeutral-99 */
  --background-elevated:   #FFFFFF;

  /* Interaction / fill (gray fills behind chips, toggles, hovers) */
  --fill-normal:           rgba(112,115,124,0.16);
  --fill-strong:           rgba(112,115,124,0.22);
  --fill-alternative:      rgba(112,115,124,0.08);
  --fill-disable:          rgba(112,115,124,0.08);

  /* Lines / borders */
  --line-normal:           rgba(112,115,124,0.22);
  --line-neutral:          rgba(112,115,124,0.16);
  --line-strong:           rgba(112,115,124,0.52);

  /* Status */
  --status-positive:       #00BF40;   /* green-50 */
  --status-cautionary:     #FF9200;   /* orange-50 */
  --status-negative:       #FF4242;   /* red-50 */
  --status-informative:    #0066FF;   /* blue-50 */

  /* Inverse (for dark-on-light overlays, toasts) */
  --inverse-background:    #1B1C1E;   /* coolNeutral-15 */
  --inverse-label:         #FFFFFF;
  --inverse-primary:       #69A5FF;   /* blue-70 */

  /* =========================================================================
     4. ELEVATION  —  soft, low-contrast shadows. Cards barely lift; modals lift more.
     ========================================================================= */
  --shadow-emphasize: 0 0 1px rgba(23,23,23,0.06), 0 1px 2px rgba(23,23,23,0.07);
  --shadow-normal:    0 1px 4px rgba(23,23,23,0.07), 0 0 1px rgba(23,23,23,0.06);
  --shadow-strong:    0 4px 12px rgba(23,23,23,0.10), 0 0 1px rgba(23,23,23,0.06);
  --shadow-heavy:     0 8px 28px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);

  /* =========================================================================
     5. RADIUS
     ========================================================================= */
  --radius-2:2px; --radius-4:4px; --radius-6:6px; --radius-8:8px;
  --radius-10:10px; --radius-12:12px; --radius-16:16px; --radius-20:20px;
  --radius-24:24px; --radius-32:32px; --radius-pill:1000px;

  /* =========================================================================
     6. SPACING  —  4px base grid
     ========================================================================= */
  --space-2:2px;  --space-4:4px;  --space-6:6px;  --space-8:8px;  --space-10:10px;
  --space-12:12px; --space-16:16px; --space-20:20px; --space-24:24px; --space-28:28px;
  --space-32:32px; --space-40:40px; --space-48:48px; --space-64:64px; --space-80:80px;

  /* =========================================================================
     7. TYPE  —  family + scale tokens
        Scale: Display → Title → Heading → Headline → Body → Label → Caption.
        Each token bundles size / line-height / tracking. Weights: 400/500/600/700.
     ========================================================================= */
  --font-sans: "Pretendard", "Pretendard JP", -apple-system, BlinkMacSystemFont,
               "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --font-mono: "SF Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700;
}

/* ---------------------------------------------------------------------------
   8. SEMANTIC TYPE CLASSES
   Apply directly: <h1 class="ds-display-2">. Sizes are fixed px (this system is
   density-tuned, not fluid). letter-spacing tightens as size grows.
--------------------------------------------------------------------------- */
.ds-display-1 { font:var(--weight-bold) 56px/1.286 var(--font-sans); letter-spacing:-0.031em; }
.ds-display-2 { font:var(--weight-bold) 40px/1.3   var(--font-sans); letter-spacing:-0.0282em; }
.ds-display-3 { font:var(--weight-bold) 36px/1.334 var(--font-sans); letter-spacing:-0.027em; }

.ds-title-1   { font:var(--weight-bold) 32px/1.375 var(--font-sans); letter-spacing:-0.0253em; }
.ds-title-2   { font:var(--weight-bold) 28px/1.358 var(--font-sans); letter-spacing:-0.0236em; }
.ds-title-3   { font:var(--weight-semibold) 24px/1.334 var(--font-sans); letter-spacing:-0.023em; }

.ds-heading-1 { font:var(--weight-semibold) 22px/1.364 var(--font-sans); letter-spacing:-0.0194em; }
.ds-heading-2 { font:var(--weight-semibold) 20px/1.4   var(--font-sans); letter-spacing:-0.012em; }

.ds-headline-1{ font:var(--weight-semibold) 18px/1.445 var(--font-sans); letter-spacing:-0.002em; }
.ds-headline-2{ font:var(--weight-semibold) 17px/1.412 var(--font-sans); letter-spacing:0em; }

.ds-body-1    { font:var(--weight-medium) 16px/1.5   var(--font-sans); letter-spacing:0.0057em; }
.ds-body-1-reading { font:var(--weight-medium) 16px/1.625 var(--font-sans); letter-spacing:0.0057em; }
.ds-body-2    { font:var(--weight-medium) 15px/1.467 var(--font-sans); letter-spacing:0.0096em; }
.ds-body-2-reading { font:var(--weight-medium) 15px/1.6 var(--font-sans); letter-spacing:0.0096em; }

.ds-label-1   { font:var(--weight-medium) 14px/1.429 var(--font-sans); letter-spacing:0.0145em; }
.ds-label-2   { font:var(--weight-medium) 13px/1.385 var(--font-sans); letter-spacing:0.0194em; }

.ds-caption-1 { font:var(--weight-medium) 12px/1.334 var(--font-sans); letter-spacing:0.0252em; }
.ds-caption-2 { font:var(--weight-medium) 11px/1.273 var(--font-sans); letter-spacing:0.0311em; }

.ds-mono      { font:var(--weight-medium) 14px/1.5 var(--font-mono); letter-spacing:0; }

/* Base reset helpers (optional) */
.ds-base { font-family:var(--font-sans); color:var(--label-normal);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }

/* ---------------------------------------------------------------------------
   9. CROSS-DOCUMENT VIEW TRANSITIONS
   Smooth crossfade between language pages (/, /en/, /ja/) on same-origin MPA
   navigation. Supported browsers animate; others fall back to instant nav.
--------------------------------------------------------------------------- */
@view-transition { navigation: auto; }

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: pl-vt-fade-out 0.20s ease both; }
  ::view-transition-new(root) { animation: pl-vt-fade-in 0.32s ease both; }
}
@keyframes pl-vt-fade-out { to { opacity: 0; } }
@keyframes pl-vt-fade-in { from { opacity: 0; } }