/**
 * Planet DDS Design System — Colors & Type
 * Forked from Untitled UI; brand color is Planet DDS blue (#0074E8).
 */

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

:root {
  /* ============ BASE ============ */
  --white: #ffffff;
  --black: #000000;

  /* ============ BRAND (Planet DDS Blue) ============ */
  --brand-25:  #e5f0ff;
  --brand-50:  #d1e6ff;
  --brand-100: #b3d6ff;
  --brand-200: #80bbff;
  --brand-300: #4da0ff;
  --brand-400: #1a86f0;
  --brand-500: #0074e8;
  --brand-600: #0069dc;
  --brand-700: #005ec6;
  --brand-800: #0052b0;
  --brand-900: #004699;
  --brand-950: #003366;

  /* ============ GRAY (neutral) ============ */
  --gray-25:  #fdfdfd;
  --gray-50:  #fafafa;
  --gray-100: #f5f5f5;
  --gray-200: #e9eaeb;
  --gray-300: #d5d7da;
  --gray-400: #a4a7ae;
  --gray-500: #717680;
  --gray-600: #535862;
  --gray-700: #414651;
  --gray-800: #252b37;
  --gray-900: #181d27;
  --gray-950: #0a0d12;

  /* ============ ERROR ============ */
  --error-25:  #fffbfa;
  --error-50:  #fef3f2;
  --error-100: #fee4e2;
  --error-200: #fecdca;
  --error-300: #fda29b;
  --error-400: #f97066;
  --error-500: #f04438;
  --error-600: #d92d20;
  --error-700: #b42318;

  /* ============ WARNING ============ */
  --warning-25:  #fffcf5;
  --warning-50:  #fffaeb;
  --warning-100: #fef0c7;
  --warning-200: #fedf89;
  --warning-300: #fec84b;
  --warning-400: #fdb022;
  --warning-500: #f79009;
  --warning-600: #dc6803;
  --warning-700: #b54708;

  /* ============ SUCCESS ============ */
  --success-25:  #f6fef9;
  --success-50:  #ecfdf3;
  --success-100: #dcfae6;
  --success-200: #abefc6;
  --success-300: #75e0a7;
  --success-400: #47cd89;
  --success-500: #17b26a;
  --success-600: #079455;
  --success-700: #067647;

  /* ============ SEMANTIC — Text (Foreground) ============ */
  --fg-primary: var(--gray-900);        /* titles */
  --fg-secondary: var(--gray-700);      /* body */
  --fg-tertiary: var(--gray-600);       /* supporting */
  --fg-quaternary: var(--gray-500);     /* hint/placeholder */
  --fg-disabled: var(--gray-400);
  --fg-placeholder: var(--gray-500);
  --fg-brand-primary: var(--brand-600);
  --fg-brand-secondary: var(--brand-700);
  --fg-error: var(--error-600);
  --fg-warning: var(--warning-600);
  --fg-success: var(--success-600);
  --fg-on-brand: var(--white);

  /* ============ SEMANTIC — Backgrounds ============ */
  --bg-primary: var(--white);
  --bg-secondary: var(--gray-50);
  --bg-tertiary: var(--gray-100);
  --bg-quaternary: var(--gray-200);
  --bg-active: var(--gray-50);
  --bg-disabled: var(--gray-100);
  --bg-brand-primary: var(--brand-50);
  --bg-brand-secondary: var(--brand-100);
  --bg-brand-solid: var(--brand-600);
  --bg-brand-solid-hover: var(--brand-700);
  --bg-brand-section: var(--brand-800);
  --bg-error-primary: var(--error-50);
  --bg-error-solid: var(--error-600);
  --bg-warning-primary: var(--warning-50);
  --bg-success-primary: var(--success-50);

  /* ============ SEMANTIC — Borders ============ */
  --border-primary: var(--gray-300);
  --border-secondary: var(--gray-200);
  --border-tertiary: var(--gray-100);
  --border-disabled: var(--gray-300);
  --border-brand: var(--brand-500);
  --border-brand-alt: var(--brand-600);
  --border-error: var(--error-500);

  /* ============ FONT FAMILY ============ */
  --font-display: "Inter", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-body:    "Inter", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ============ FONT SIZE (text / display) ============ */
  --text-xs: 12px;   --text-xs-lh: 18px;
  --text-sm: 14px;   --text-sm-lh: 20px;
  --text-md: 16px;   --text-md-lh: 24px;
  --text-lg: 18px;   --text-lg-lh: 28px;
  --text-xl: 20px;   --text-xl-lh: 30px;

  --display-xs: 24px;  --display-xs-lh: 32px;
  --display-sm: 30px;  --display-sm-lh: 38px;
  --display-md: 36px;  --display-md-lh: 44px;   --display-md-ls: -0.72px;
  --display-lg: 48px;  --display-lg-lh: 60px;   --display-lg-ls: -0.96px;
  --display-xl: 60px;  --display-xl-lh: 72px;   --display-xl-ls: -1.2px;
  --display-2xl: 72px; --display-2xl-lh: 90px;  --display-2xl-ls: -1.44px;

  /* ============ FONT WEIGHT ============ */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ============ SPACING ============ */
  --space-xxs: 2px;
  --space-xs: 4px;
  --space-sm: 6px;
  --space-md: 8px;
  --space-lg: 12px;
  --space-xl: 16px;
  --space-2xl: 20px;
  --space-3xl: 24px;
  --space-4xl: 32px;
  --space-5xl: 40px;
  --space-6xl: 48px;
  --space-7xl: 64px;
  --space-8xl: 80px;
  --space-9xl: 96px;

  /* ============ RADIUS ============ */
  --radius-none: 0px;
  --radius-xxs: 2px;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-3xl: 20px;
  --radius-4xl: 24px;
  --radius-full: 9999px;

  /* ============ SHADOWS ============ */
  --shadow-xs: 0px 1px 2px rgba(10, 13, 18, 0.05);
  --shadow-sm: 0px 1px 3px rgba(10, 13, 18, 0.1), 0px 1px 2px -1px rgba(10, 13, 18, 0.1);
  --shadow-md: 0px 4px 6px -1px rgba(10, 13, 18, 0.1), 0px 2px 4px -2px rgba(10, 13, 18, 0.06);
  --shadow-lg: 0px 12px 16px -4px rgba(10, 13, 18, 0.08), 0px 4px 6px -2px rgba(10, 13, 18, 0.03);
  --shadow-xl: 0px 20px 24px -4px rgba(10, 13, 18, 0.08), 0px 8px 8px -4px rgba(10, 13, 18, 0.03);
  --shadow-2xl: 0px 24px 48px -12px rgba(10, 13, 18, 0.18);
  --shadow-3xl: 0px 32px 64px -12px rgba(10, 13, 18, 0.14);

  /* Signature "skeuomorphic" button shadow — inset ring + xs drop */
  --shadow-skeuomorphic: 0px 0px 0px 1px rgba(10, 13, 18, 0.18) inset, 0px -2px 0px 0px rgba(10, 13, 18, 0.05) inset;
  --shadow-xs-skeuomorphic: var(--shadow-skeuomorphic), var(--shadow-xs);

  /* ============ FOCUS RING ============ */
  --focus-ring: 0 0 0 4px rgba(0, 116, 232, 0.24);
  --focus-ring-error: 0 0 0 4px rgba(240, 68, 56, 0.24);
}

/* ============ SEMANTIC TEXT STYLES ============ */
html, body {
  font-family: var(--font-body);
  color: var(--fg-secondary);
  background: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, .h1, .display-lg {
  font-family: var(--font-display);
  font-size: var(--display-lg);
  line-height: var(--display-lg-lh);
  letter-spacing: var(--display-lg-ls);
  font-weight: var(--fw-semibold);
  color: var(--fg-primary);
}
h2, .h2, .display-md {
  font-family: var(--font-display);
  font-size: var(--display-md);
  line-height: var(--display-md-lh);
  letter-spacing: var(--display-md-ls);
  font-weight: var(--fw-semibold);
  color: var(--fg-primary);
}
h3, .h3, .display-sm {
  font-family: var(--font-display);
  font-size: var(--display-sm);
  line-height: var(--display-sm-lh);
  font-weight: var(--fw-semibold);
  color: var(--fg-primary);
}
h4, .h4, .display-xs {
  font-family: var(--font-display);
  font-size: var(--display-xs);
  line-height: var(--display-xs-lh);
  font-weight: var(--fw-semibold);
  color: var(--fg-primary);
}
.text-xl { font-size: var(--text-xl); line-height: var(--text-xl-lh); }
.text-lg { font-size: var(--text-lg); line-height: var(--text-lg-lh); }
p, .text-md { font-size: var(--text-md); line-height: var(--text-md-lh); }
.text-sm { font-size: var(--text-sm); line-height: var(--text-sm-lh); }
.text-xs { font-size: var(--text-xs); line-height: var(--text-xs-lh); }
code, .text-mono { font-family: var(--font-mono); font-size: 0.875em; }