/* Drafter Design System — colors & type tokens
 * Import first, before any component styles.
 */

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

:root {
  /* ============ COLOR — LIGHT FIRST ============ */

  /* Surfaces — true white + light grays */
  --white:        #FFFFFF;    /* primary canvas */
  --bg-1:         #FAFAFA;    /* subtle sunken */
  --bg-2:         #F5F5F5;    /* section bg */
  --bg-3:         #EEEEEE;    /* raised-sunken / hover surface */

  /* Gray — neutral ramp */
  --gray-50:      #FAFAFA;
  --gray-100:     #F5F5F5;
  --gray-200:     #EEEEEE;
  --gray-300:     #E0E0E0;   /* hairline borders */
  --gray-400:     #BDBDBD;
  --gray-500:     #9E9E9E;
  --gray-600:     #757575;   /* muted text */
  --gray-700:     #424242;   /* strong text */
  --gray-800:     #212121;   /* headings */
  --gray-900:     #0A0A0A;

  /* Orange — the fun accent */
  --orange-50:    #FFF4E6;
  --orange-100:   #FFE8CC;
  --orange-200:   #FFD8A8;
  --orange-300:   #FFB974;
  --orange-400:   #FF9940;
  --orange-500:   #FD7E14;   /* ★ primary accent */
  --orange-600:   #E36B0A;
  --orange-700:   #B85305;

  /* Cream — brand heritage (wordmark on dark surfaces) */
  --cream:        #FFF6E7;
  --ink-dark:     #14181F;   /* for dark brand surfaces (hero, logo lockup) */

  /* Semantic — muted */
  --success:      #2F7D5C;
  --success-bg:   #E6F3EC;
  --warning:      #B47B1A;
  --warning-bg:   #FFF3DC;
  --danger:       #D0422C;
  --danger-bg:    #FBE7E2;
  --info:         var(--gray-700);
  --info-bg:      var(--gray-100);

  /* Foreground / background semantic vars */
  --bg:           var(--white);
  --bg-sunken:    var(--bg-1);
  --bg-raised:    var(--white);
  --fg:           var(--gray-800);
  --fg-muted:     var(--gray-600);
  --fg-subtle:    var(--gray-500);
  --fg-on-orange: var(--white);
  --fg-on-dark:   var(--cream);
  --border:       var(--gray-300);
  --border-strong:var(--gray-400);
  --brand:        var(--gray-900);
  --brand-hover:  var(--gray-800);
  --accent:       var(--orange-500);
  --accent-hover: var(--orange-600);

  /* ============ SHADOWS ============ */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-inset: inset 0 1px 0 rgba(0, 0, 0, 0.04);

  /* ============ RADII ============ */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;

  /* ============ SPACING (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-24: 96px;

  /* ============ MOTION ============ */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --dur-micro: 120ms;
  --dur-base: 200ms;
  --dur-panel: 320ms;

  /* ============ TYPE ============ */
  --font-sans:    "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fs-xs: 11px; --fs-sm: 12px; --fs-body: 14px; --fs-md: 15px; --fs-lg: 17px;
  --fs-h4: 16px; --fs-h3: 19px; --fs-h2: 24px; --fs-h1: 34px;
  --fs-display: 56px;

  --lh-tight: 1.2; --lh-snug: 1.35; --lh-body: 1.5; --lh-loose: 1.65;

  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-loose: 0.08em;

  /* ============ DRAFTING GRID PATTERN ============ */
  --grid-dot: radial-gradient(rgba(0,0,0,0.10) 1px, transparent 1px);
  --grid-size: 8px;
}

/* Dark brand surface (hero, footer, marketing accents) */
:root[data-theme="dark"] {
  --bg:         var(--ink-dark);
  --bg-sunken:  #0C0F14;
  --bg-raised:  #1F242D;
  --fg:         var(--cream);
  --fg-muted:   #9AA1AA;
  --fg-subtle:  #6B7380;
  --border:     #2A2F38;
  --border-strong: #3A4049;
  --brand:      var(--cream);
  --brand-hover:#FFFFFF;
  --shadow-1:   0 1px 2px rgba(0,0,0,0.4);
  --shadow-2:   0 8px 24px rgba(0,0,0,0.5);
}

/* ============ SEMANTIC TYPE RULES ============ */

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, .display {
  font-family: var(--font-display);
  color: var(--fg);
  margin: 0;
}
h1, .h1 { font-size: var(--fs-h1); font-weight: 600; line-height: var(--lh-tight); letter-spacing: -0.02em; }
h2, .h2 { font-size: var(--fs-h2); font-weight: 600; line-height: var(--lh-snug);  letter-spacing: -0.015em; }
h3, .h3 { font-size: var(--fs-h3); font-weight: 500; line-height: var(--lh-snug);  letter-spacing: -0.01em; }
h4, .h4 { font-size: var(--fs-h4); font-weight: 500; line-height: var(--lh-snug); }
.display { font-size: var(--fs-display); font-weight: 600; letter-spacing: -0.03em; line-height: 1.02; }

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

code, .mono, pre, kbd {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums slashed-zero;
  font-size: 0.92em;
}

.stamp {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-loose);
  text-transform: uppercase;
  color: var(--fg-muted);
}

table, .tabular, [data-tabular] { font-variant-numeric: tabular-nums slashed-zero; }

*:focus-visible {
  outline: 2px solid var(--orange-500);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

.grid-paper {
  background-color: var(--white);
  background-image: var(--grid-dot);
  background-size: var(--grid-size) var(--grid-size);
}