/* ============================================
   PECO Design System — Foundations
   Colors + Type
   ============================================ */

/* Fonts are served locally from app/assets/fonts/fonts.css by the Worksuite server. */

:root {
  /* ---------- BRAND (MONOCHROME) ---------- */
  --peco-black: #0A0A0A;
  --peco-black-hover: #1F1F1E;
  --peco-black-press: #000000;

  /* Kept names for backwards-compat — all map to black / warm grays now */
  --peco-orange: #0A0A0A;
  --peco-orange-hover: #1F1F1E;
  --peco-orange-press: #000000;
  --peco-orange-50:  #F4F4F2;
  --peco-orange-100: #ECECE9;
  --peco-orange-200: #E2E2DF;
  --peco-orange-300: #CCCCC8;
  --peco-orange-400: #3D3D3B;
  --peco-orange-500: #0A0A0A;
  --peco-orange-600: #000000;
  --peco-orange-700: #141413;
  --peco-orange-800: #0A0A0A;
  --peco-orange-900: #000000;

  /* ---------- NEUTRALS (warm-cool slate) ---------- */
  --gray-0:   #FFFFFF;
  --gray-50:  #FAFAF9;
  --gray-100: #F4F4F2;
  --gray-150: #ECECE9;
  --gray-200: #E2E2DF;
  --gray-300: #CCCCC8;
  --gray-400: #A8A8A3;
  --gray-500: #7C7C78;
  --gray-600: #5A5A57;
  --gray-700: #3D3D3B;
  --gray-800: #252524;
  --gray-900: #141413;
  --gray-950: #0A0A0A;

  /* ---------- SEMANTIC ---------- */
  --success: #0FB981;
  --success-bg: #E8F7F1;
  --warning: #F5A623;
  --warning-bg: #FEF5E7;
  --danger:  #E5484D;
  --danger-bg: #FCECEC;
  --info:    #3B82F6;
  --info-bg: #EBF2FE;

  /* ---------- SURFACE TOKENS (LIGHT) ---------- */
  --bg:        var(--gray-50);
  --bg-elev:   var(--gray-0);
  --bg-sunken: var(--gray-100);
  --bg-inset:  var(--gray-150);

  --fg:   var(--gray-900);
  --fg-2: var(--gray-700);
  --fg-3: var(--gray-500);
  --fg-4: var(--gray-400);
  --fg-inv: var(--gray-0);

  --border:        var(--gray-200);
  --border-strong: var(--gray-300);
  --border-muted:  var(--gray-150);

  --accent:       var(--peco-black);
  --accent-hover: var(--peco-black-hover);
  --accent-press: var(--peco-black-press);
  --accent-soft:  var(--gray-100);
  --accent-fg:    #FFFFFF;

  /* ---------- RADII ---------- */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-2xl: 28px;
  --r-full: 9999px;

  /* ---------- SHADOWS ---------- */
  --shadow-xs: 0 1px 2px rgba(20, 20, 19, 0.04);
  --shadow-sm: 0 1px 3px rgba(20, 20, 19, 0.05), 0 1px 2px rgba(20, 20, 19, 0.04);
  --shadow-md: 0 4px 12px -2px rgba(20, 20, 19, 0.06), 0 2px 4px rgba(20, 20, 19, 0.04);
  --shadow-lg: 0 12px 32px -4px rgba(20, 20, 19, 0.10), 0 4px 8px rgba(20, 20, 19, 0.04);
  --shadow-xl: 0 24px 60px -12px rgba(20, 20, 19, 0.18);
  --shadow-orange: 0 8px 24px -8px rgba(10, 10, 10, 0.28);

  /* ---------- SPACING SCALE (4px base) ---------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;

  /* ---------- TYPOGRAPHY ---------- */
  --font-sans: 'Pretendard', 'Malgun Gothic', '맑은 고딕', -apple-system, BlinkMacSystemFont,
               system-ui, 'Apple SD Gothic Neo', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Base */
  --text-xs:   12px;
  --text-sm:   13px;
  --text-base: 14px;
  --text-md:   16px;
  --text-lg:   18px;
  --text-xl:   22px;
  --text-2xl:  28px;
  --text-3xl:  36px;
  --text-4xl:  48px;
  --text-5xl:  64px;

  --lh-tight:  1.2;
  --lh-snug:   1.35;
  --lh-normal: 1.5;
  --lh-relaxed: 1.7;

  --tracking-tight: -0.02em;
  --tracking-snug:  -0.01em;
  --tracking-normal: 0;

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

/* ---------- DARK THEME ---------- */
[data-theme="dark"] {
  --bg:        #0D0D0C;
  --bg-elev:   #17171A;
  --bg-sunken: #0A0A0A;
  --bg-inset:  #1F1F22;

  --fg:   #F2F2EF;
  --fg-2: #C9C9C4;
  --fg-3: #8A8A85;
  --fg-4: #5A5A57;
  --fg-inv: #0A0A0A;

  --border:        #2A2A2D;
  --border-strong: #3D3D40;
  --border-muted:  #1F1F22;

  --accent:       #FFFFFF;
  --accent-hover: #E5E5E2;
  --accent-press: #CCCCC8;
  --accent-soft:  rgba(255, 255, 255, 0.10);
  --accent-fg:    #0A0A0A;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px -2px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 12px 32px -4px rgba(0, 0, 0, 0.6), 0 4px 8px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 24px 60px -12px rgba(0, 0, 0, 0.7);
  --shadow-orange: 0 8px 24px -8px rgba(0, 0, 0, 0.6);
}

/* ============================================
   Semantic element defaults
   ============================================ */
html, body {
  font-family: var(--font-sans);
  color: var(--fg);
  background: var(--bg);
  font-feature-settings: "ss02", "ss03", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-size: var(--text-4xl);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}
h2, .h2 {
  font-size: var(--text-3xl);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}
h3, .h3 {
  font-size: var(--text-2xl);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg);
}
h4, .h4 {
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: var(--lh-snug);
  color: var(--fg);
}
h5, .h5 {
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: var(--lh-snug);
  color: var(--fg);
}
p, .body {
  font-size: var(--text-md);
  font-weight: 400;
  line-height: var(--lh-normal);
  color: var(--fg-2);
}
.body-sm {
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}
.caption {
  font-size: var(--text-sm);
  color: var(--fg-3);
  line-height: var(--lh-snug);
}
.eyebrow {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-3);
}
code, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}