/* CNC Design System — Colors & Typography
 * Source: coolncool-dashboard (Lovable/Vite + Tailwind + shadcn/ui)
 * Docs: coolncool-gnuboard/docs/DESIGN_SYSTEM_GUIDE.md
 */

/* ====== Fonts ====== */
@font-face {
  font-family: 'Pretendard';
  src: url('fonts/Pretendard-Light.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  src: url('fonts/Pretendard-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  src: url('fonts/Pretendard-SemiBold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  src: url('fonts/Pretendard-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  src: url('fonts/Pretendard-ExtraBold.woff2') format('woff2');
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  src: url('fonts/Pretendard-Black.woff2') format('woff2');
  font-weight: 900; font-style: normal; font-display: swap;
}
/* Outfit — logo-only, Google Fonts CDN (loaded via <link> in host page) */

:root {
  /* ---- Font stacks ---- */
  --font-sans: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, 'Roboto', sans-serif;
  --font-heading: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-logo: 'Outfit', 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-number: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  /* ---- Base color tokens (light) ---- */
  --bg:           #ffffff;     /* hsl(0 0% 100%) */
  --fg:           #1a1a1a;     /* hsl(0 0% 10%) */
  --card:         #f8fafc;     /* hsl(210 40% 98%) */
  --muted:        #e4eaf1;     /* hsl(214 32% 94%) */
  --muted-fg:     #334155;     /* hsl(215 25% 27%) */
  --border:       #e2e8f0;     /* hsl(214 32% 91%) */
  --input:        #e2e8f0;
  --ring:         #003d7a;     /* hsl(216 100% 24%) */

  /* Primary — Deep Blue */
  --primary:        #1d4fd7;   /* hsl(224 76% 48%) */
  --primary-fg:     #ffffff;
  --primary-light:  #d6deed;   /* hsl(224 60% 90%) */
  --primary-dark:   #1839a3;   /* hsl(224 76% 38%) */
  --link:           #3564e3;   /* active nav accent */

  /* Secondary (silver) */
  --secondary:      #bfbfbf;
  --secondary-fg:   #333333;

  /* Accent — Gold Yellow */
  --accent:         #fbbf24;   /* hsl(45 96% 56%) */
  --accent-fg:      #1a1a1a;
  --accent-light:   #fde092;

  /* Semantic */
  --success:        #004516;   /* hsl(141 100% 14%) — brand deep green */
  --success-fg:     #ffffff;
  --success-light:  #cbe9d3;
  --warning:        #f59e0b;   /* hsl(38 92% 50%) amber */
  --warning-fg:     #ffffff;
  --danger:         #dc2626;   /* hsl(0 72% 51%) */
  --danger-fg:      #ffffff;
  --info:           #2d7fbd;

  /* Chart palette (10) — from index.css */
  --chart-1:  #003d7a;  /* Navy */
  --chart-2:  #005822;  /* Green */
  --chart-3:  #83745a;  /* Silver/Taupe */
  --chart-4:  #f59e0b;  /* Amber */
  --chart-5:  #1a8cc7;  /* Blue */
  --chart-6:  #c7394f;  /* Red */
  --chart-7:  #148f75;  /* Teal */
  --chart-8:  #a665cc;  /* Purple */
  --chart-9:  #4040cc;  /* Indigo */
  --chart-10: #e67a2c;  /* Orange */

  /* Header / footer */
  --header-bg: #003d7a;        /* Navy (spec), nav bar uses translucent bg/95 */
  --header-fg: #ffffff;
  --footer-bg: #0a1630;

  /* Radii — sharp corners */
  --radius: 0.25rem;           /* 4px */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 4px;
  --radius-xl: 4px;            /* cards and metric cards still 4px (spec) */

  /* Shadows — clean & minimal */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.06);
  --shadow-md: 0 2px 8px rgba(0,0,0,.08);
  --shadow-lg: 0 4px 16px rgba(0,0,0,.10);
  --shadow-glow: 0 0 16px rgba(0,61,122,.15);
  --glass-bg: rgba(0,61,122,.05);
  --glass-border: rgba(0,0,0,.08);
  --glass-shadow: 0 4px 24px rgba(0,61,122,.08);

  /* Gradients — subtle, professional */
  --gradient-primary: linear-gradient(135deg, #003d7a, #1a5391);
  --gradient-hero:    linear-gradient(135deg, #003d7a 0%, #1d5aa3 50%, #2e76b8 100%);
  --gradient-card:    linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
  --gradient-accent:  linear-gradient(135deg, #83745a, #9b8b6d);
  --gradient-warning: linear-gradient(135deg, #f59e0b, #fbbf24);

  /* Motion */
  --transition-smooth: all .2s cubic-bezier(.4,0,.2,1);
  --transition-bounce: all .3s cubic-bezier(.175,.885,.32,1.275);

  /* Semantic typography vars (px-friendly) */
  --fs-caption: 12px;
  --fs-sm:      14px;
  --fs-body:    16px;
  --fs-lg:      18px;
  --fs-xl:      20px;
  --fs-h3:      20px;
  --fs-h2:      24px;
  --fs-h1:      30px;
  --fs-metric:  32px;

  --lh-tight: 1.15;
  --lh-body:  1.5;

  --tracking-tight: -0.02em;
  --tracking-logo:  -0.015em;
}

/* ---- Dark theme override ---- */
[data-theme="dark"], .dark {
  --bg:         #0a0f1a;       /* hsl(216 33% 6%) */
  --fg:         #e0e0e0;
  --card:       #161b24;       /* hsl(215 19% 11%) */
  --muted:      #242a35;
  --muted-fg:   #7a8599;
  --border:     #2a313d;
  --input:      #242a35;
  --ring:       #1d4fd7;

  --primary:       #3564e3;    /* hsl(224 75% 55%) */
  --primary-light: #23346b;
  --primary-dark:  #2a58c4;
  --link:          #7aa2ff;

  --secondary:     #242a35;
  --secondary-fg:  #e0e0e0;

  --success:       #1f9945;
  --success-light: #173d24;
  --warning:       #f5a524;
  --danger:        #e04545;

  --header-bg: #0d131f;
  --footer-bg: #050810;

  --shadow-sm: 0 1px 3px rgba(0,0,0,.2);
  --shadow-md: 0 2px 8px rgba(0,0,0,.3);
  --shadow-lg: 0 4px 16px rgba(0,0,0,.4);
  --shadow-glow: 0 0 16px rgba(29,79,215,.25);

  --gradient-card: linear-gradient(145deg, #181e28 0%, #12171f 100%);
}

/* ====== Semantic type styles (drop-in classes) ====== */
html, body { font-family: var(--font-sans); color: var(--fg); background: var(--bg); }
body { font-size: var(--fs-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 900;               /* headings are always Black weight */
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
  color: var(--fg);
  margin: 0;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 800; }
h4 { font-size: var(--fs-lg); font-weight: 800; }
h5 { font-size: var(--fs-body); font-weight: 700; }
h6 { font-size: var(--fs-sm); font-weight: 700; }

p  { margin: 0; color: var(--fg); }
small, .caption { font-size: var(--fs-caption); color: var(--muted-fg); }

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 4px; }

strong, b { font-weight: 700; }
.font-light     { font-weight: 300; }
.font-normal    { font-weight: 400; }
.font-medium,
.font-semibold  { font-weight: 600; }
.font-bold      { font-weight: 700; }
.font-extrabold { font-weight: 800; }
.font-black     { font-weight: 900; }

.font-logo {
  font-family: var(--font-logo);
  font-weight: 800;
  letter-spacing: var(--tracking-logo);
}
.font-number {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* Metric value — specific spec: extrabold, tabular, -0.02em */
.metric-value {
  font-size: var(--fs-metric);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--fg);
}

/* Muted text */
.text-muted   { color: var(--muted-fg); }
.text-primary { color: var(--primary); }
.text-success { color: var(--success); }
.text-danger  { color: var(--danger); }
.text-warning { color: var(--warning); }
.text-accent  { color: var(--accent); }

/* Utility surfaces */
.surface-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.surface-muted { background: var(--muted); }