/* ============================================================
   Orange & Green DSystem — Foundations
   Bright Orange · Vivid Green · White — clean, energetic, flat

   FONTS — Noto Sans JP is SELF-HOSTED below from /fonts (variable,
   weight 100-900, covers display + body). Source Code Pro (mono)
   loads from Google Fonts CDN — no local file is bundled for it.
   ============================================================ */

/* ---------- SELF-HOSTED: Noto Sans JP (variable, wght 100-900) ---------- */
@font-face {
  font-family: "Noto Sans JP";
  src: url("../fonts/NotoSansJP-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- CDN: Source Code Pro (mono, code snippets only) ---------- */
@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;500&display=swap');

:root {
  /* ---------- BRAND PRIMARY: ORANGE ---------- */
  --color-orange-50:  #FFF3EE;
  --color-orange-100: #FFE0D0;
  --color-orange-200: #FFBFA3;
  --color-orange-300: #FF9A6E;
  --color-orange-400: #FF7A4A;
  --color-orange-500: #FF6B35; /* Primary Orange — CTAs, highlights */
  --color-orange-600: #E85A25; /* hover */
  --color-orange-700: #C44A1A; /* active/press */
  --color-orange-800: #9A3912;
  --color-orange-900: #6E280C;

  /* ---------- BRAND SECONDARY: GREEN ---------- */
  --color-green-50:  #EDFAF4;
  --color-green-100: #D0F4E2;
  --color-green-200: #A0E8C4;
  --color-green-300: #68D9A0;
  --color-green-400: #4ACC88;
  --color-green-500: #3DBE7A; /* Primary Green — success, growth, secondary action */
  --color-green-600: #2FA068; /* hover */
  --color-green-700: #228054; /* active/press */
  --color-green-800: #185E3D;
  --color-green-900: #0F3F29;

  /* ---------- NEUTRAL RAMP ---------- */
  --color-neutral-0:   #FFFFFF;
  --color-neutral-50:  #F7F7F7;
  --color-neutral-100: #EFEFEF;
  --color-neutral-200: #E5E5E5;
  --color-neutral-300: #D4D4D4;
  --color-neutral-400: #ABABAB;
  --color-neutral-500: #9E9E9E;
  --color-neutral-600: #6B6B6B;
  --color-neutral-700: #3D3D3D;
  --color-neutral-800: #2A2A2A;
  --color-neutral-900: #1A1A1A; /* primary text / dark surfaces */

  /* ---------- SEMANTIC SURFACE / TEXT ---------- */
  --color-bg-page:        var(--color-neutral-0);
  --color-bg-surface:     var(--color-neutral-50);
  --color-bg-card:        var(--color-neutral-0);
  --color-bg-muted:       var(--color-neutral-100);
  --color-bg-orange-tint: var(--color-orange-50);  /* soft orange section bg */
  --color-bg-green-tint:  var(--color-green-50);   /* soft green section bg */

  --color-border:        var(--color-neutral-200);
  --color-border-focus:  var(--color-orange-500);
  --color-border-strong: var(--color-neutral-400);

  --color-text-primary:   var(--color-neutral-900);
  --color-text-secondary: var(--color-neutral-600);
  --color-text-muted:     var(--color-neutral-500);
  --color-text-inverse:   var(--color-neutral-0);
  --color-text-orange:    var(--color-orange-500);
  --color-text-green:     var(--color-green-600);

  /* ---------- SEMANTIC ACCENTS ---------- */
  --color-action-primary:         var(--color-orange-500);
  --color-action-primary-hover:   var(--color-orange-600);
  --color-action-primary-press:   var(--color-orange-700);
  --color-action-secondary:       var(--color-green-500);
  --color-action-secondary-hover: var(--color-green-600);
  --color-action-secondary-press: var(--color-green-700);

  --color-status-success: var(--color-green-500);
  --color-status-warning: #F5A623;
  --color-status-error:   #E83535;
  --color-status-info:    #2E86DE;

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-sans:    "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-mono:    "Source Code Pro", "Menlo", "Consolas", monospace;

  /* ---------- TYPE SCALE ---------- */
  --font-size-xs:  0.75rem;  /* 12 */
  --font-size-sm:  0.875rem; /* 14 */
  --font-size-md:  1rem;     /* 16 */
  --font-size-lg:  1.125rem; /* 18 */
  --font-size-xl:  1.25rem;  /* 20 */
  --font-size-2xl: 1.5rem;   /* 24 */
  --font-size-3xl: 1.875rem; /* 30 */
  --font-size-4xl: 2.25rem;  /* 36 */
  --font-size-5xl: 3rem;     /* 48 */
  --font-size-6xl: 3.75rem;  /* 60 */

  --line-height-tight:   1.2;
  --line-height-snug:    1.375;
  --line-height-normal:  1.5;
  --line-height-relaxed: 1.75;

  --letter-spacing-tight:  -0.02em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide:   0.05em;
  --letter-spacing-wider:  0.1em;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-bold:    700;
  --weight-black:   900;

  /* Semantic type aliases */
  --text-display-size:   var(--font-size-5xl);
  --text-display-weight: var(--weight-black);
  --text-heading-1-size:   var(--font-size-4xl);
  --text-heading-1-weight: var(--weight-bold);
  --text-heading-2-size:   var(--font-size-3xl);
  --text-heading-2-weight: var(--weight-bold);
  --text-heading-3-size:   var(--font-size-2xl);
  --text-heading-3-weight: var(--weight-bold);
  --text-heading-4-size:   var(--font-size-xl);
  --text-heading-4-weight: var(--weight-medium);
  --text-body-size:   var(--font-size-md);
  --text-body-weight: var(--weight-regular);
  --text-label-size:   var(--font-size-sm);
  --text-label-weight: var(--weight-medium);

  /* ---------- SPACING (8px base) ---------- */
  --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;

  --spacing-component-xs: var(--space-1);
  --spacing-component-sm: var(--space-2);
  --spacing-component-md: var(--space-4);
  --spacing-component-lg: var(--space-6);
  --spacing-section:      var(--space-12);
  --spacing-page:         var(--space-16);

  /* ---------- RADII (rounded, friendly) ---------- */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  --radius-badge:  var(--radius-sm);
  --radius-button: var(--radius-md);
  --radius-input:  var(--radius-md);
  --radius-card:   var(--radius-lg);
  --radius-dialog: var(--radius-xl);
  --radius-avatar: var(--radius-full);

  /* ---------- SHADOWS (soft, low elevation — no hard offsets) ---------- */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);  /* cards */
  --shadow-md: 0 4px 16px rgba(0,0,0,0.10); /* modals/dropdowns */
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.12);
  --shadow-xl: 0 16px 48px rgba(0,0,0,0.15);

  /* ---------- BORDERS ---------- */
  --border-width: 1px;
  --border: var(--border-width) solid var(--color-border);

  /* ---------- MOTION ---------- */
  --ease-out: ease-out;
  --transition-fast:   150ms ease-out;
  --transition-normal: 200ms ease-out;
  --transition-slow:   300ms ease-out;
  --press-scale: 0.97;

  /* ---------- LAYOUT ---------- */
  --container:        1200px;
  --container-narrow: 760px;
  --focus-ring: 0 0 0 3px var(--color-orange-300);

  /* ---------- Z-INDEX ---------- */
  --z-base: 0;
  --z-raised: 10;
  --z-dropdown: 100;
  --z-modal: 200;
  --z-toast: 300;
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   ============================================================ */
.ds-display {
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: var(--font-size-6xl);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text-primary);
}
.ds-h1 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--font-size-4xl);
  line-height: var(--line-height-tight);
  color: var(--color-text-primary);
}
.ds-h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--font-size-3xl);
  line-height: var(--line-height-snug);
  color: var(--color-text-primary);
}
.ds-h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--font-size-2xl);
  line-height: var(--line-height-snug);
  color: var(--color-text-primary);
}
.ds-h4 {
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: var(--font-size-xl);
  line-height: var(--line-height-snug);
  color: var(--color-text-primary);
}
.ds-lead {
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-secondary);
}
.ds-body {
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  font-size: var(--font-size-md);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-primary);
}
.ds-small {
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}
.ds-label {
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
}
.ds-mono {
  font-family: var(--font-mono);
  font-weight: var(--weight-regular);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
}
.ds-code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--color-bg-muted);
  border: var(--border);
  border-radius: var(--radius-xs);
  padding: 0.1em 0.4em;
  color: var(--color-orange-700);
}