/*
 * CODITECT Brand Stylesheet
 * ─────────────────────────
 * Single source of truth for fonts, colors, and typography tokens.
 * All WPP sites MUST link this file. Changes here apply to ALL sites.
 *
 * Canonical: coditect-core/assets/coditect-brand.css
 * Version: 1.0.0
 * Created: 2026-03-07
 * Track: H.10
 */

/* ── Font Stack ── */
:root {
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'SF Mono', monospace;
  --font-heading: var(--font-sans);
}

/* ── Typography Scale ── */
:root {
  --text-xs: 0.625rem;     /* 10px */
  --text-sm: 0.8125rem;    /* 13px */
  --text-base: 0.875rem;   /* 14px */
  --text-lg: 1.125rem;     /* 18px */
  --text-xl: 1.25rem;      /* 20px */
  --text-2xl: 1.5rem;      /* 24px */
  --text-3xl: 1.875rem;    /* 30px */

  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;

  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.05em;
  --tracking-wider: 0.08em;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
}

/* ── Brand Colors (Primary) ── */
:root {
  --brand-primary: #4F46E5;       /* Indigo — buttons, links, accents */
  --brand-primary-hover: #4338CA; /* Darker indigo — hover state */
  --brand-primary-light: #818CF8; /* Light indigo — dark mode links */
  --brand-primary-tint: rgba(79, 70, 229, 0.1); /* Focus rings */

  --brand-black: #000;
  --brand-white: #fff;
  --brand-danger: #DC2626;        /* Error states */
  --brand-success: #16a34a;       /* Success states */
  --brand-warning: #ca8a04;       /* Warning states */
}

/* ── Light Mode Design Tokens ── */
:root {
  --color-black: #000;
  --color-white: #fff;

  /* Surfaces */
  --color-surface: #fff;
  --color-surface-alt: #f8f9fa;
  --color-surface-dim: #f1f3f5;
  --color-surface-inset: #e2e5e9;

  /* Text */
  --color-heading: #1a1f2b;
  --color-body: #3b4252;
  --color-label: #525d6e;
  --color-muted: #6e7a8a;
  --color-dim: #98a2b0;
  --color-faint: #cdd3da;

  /* Lines */
  --color-line: #dfe3e8;
  --color-line-soft: #eef0f3;
  --color-line-hard: #c8ced6;

  /* Blue */
  --color-blue-fg: #2b6cb0;
  --color-blue-tint: #f0f5fa;
  --color-blue-line: #b4cfe4;

  /* Red */
  --color-red-fg: #b83b3b;
  --color-red-tint: #faf2f2;
  --color-red-line: #e0bfbf;

  /* Amber */
  --color-amber-fg: #8a6d1b;
  --color-amber-tint: #f9f6ed;
  --color-amber-line: #ddd0a4;

  /* Green */
  --color-green-fg: #2f7d54;
  --color-green-tint: #f0f8f4;
  --color-green-line: #b4dcc6;

  /* Emerald */
  --color-emerald-fg: #2a7260;
  --color-emerald-tint: #eef7f4;
  --color-emerald-line: #a8d8c8;

  /* Sky */
  --color-sky-fg: #2d6a8f;
  --color-sky-tint: #f0f6fa;
  --color-sky-line: #b0cfdf;

  /* Indigo */
  --color-indigo-fg: #3d5a80;
  --color-indigo-tint: #f0f3f7;
  --color-indigo-line: #b4c4d8;

  /* Purple */
  --color-purple-fg: #546275;
  --color-purple-tint: #f3f5f7;
  --color-purple-line: #c5cdd6;

  /* Orange */
  --color-orange-fg: #8c5a2c;
  --color-orange-tint: #f9f5f0;
  --color-orange-line: #ddc8b0;

  /* Teal */
  --color-teal-fg: #2a7372;
  --color-teal-tint: #eef7f6;
  --color-teal-line: #a8d6d4;

  /* Yellow */
  --color-yellow-fg: #7a6e20;
  --color-yellow-tint: #f8f6eb;

  /* Pink */
  --color-pink-fg: #6a5d65;
  --color-pink-tint: #f5f3f4;
}

/* ── Dark Mode Design Tokens ── */
html.dark {
  --color-surface: #0c1017;
  --color-surface-alt: #141a24;
  --color-surface-dim: #1c2330;
  --color-surface-inset: #2a3342;

  --color-heading: #e8ecf0;
  --color-body: #b8c0cc;
  --color-label: #8a95a5;
  --color-muted: #8a95a5;
  --color-dim: #5c6678;
  --color-faint: #3a4454;

  --color-line: #2a3342;
  --color-line-soft: #1c2330;
  --color-line-hard: #3a4454;

  --color-blue-fg: #6ba3d4;
  --color-blue-tint: #121e2e;
  --color-blue-line: #1e3454;

  --color-red-fg: #d47070;
  --color-red-tint: #241010;
  --color-red-line: #4a1c1c;

  --color-amber-fg: #c4a54a;
  --color-amber-tint: #201a08;
  --color-amber-line: #483c14;

  --color-green-fg: #5cb87a;
  --color-green-tint: #0c2018;
  --color-green-line: #1a4030;

  --color-emerald-fg: #50b090;
  --color-emerald-tint: #0a1e1a;
  --color-emerald-line: #163a32;

  --color-sky-fg: #5aaccf;
  --color-sky-tint: #0e1e28;
  --color-sky-line: #163850;

  --color-indigo-fg: #7b9cc0;
  --color-indigo-tint: #101822;
  --color-indigo-line: #1e3048;

  --color-purple-fg: #8a96aa;
  --color-purple-tint: #141820;
  --color-purple-line: #283040;

  --color-orange-fg: #c4905c;
  --color-orange-tint: #201408;
  --color-orange-line: #483418;

  --color-teal-fg: #50b0a8;
  --color-teal-tint: #0a1e1c;
  --color-teal-line: #163836;

  --color-yellow-fg: #baa84a;
  --color-yellow-tint: #1e1a08;
  --color-yellow-line: #403814;

  --color-pink-fg: #9a8890;
  --color-pink-tint: #1a161a;
  --color-pink-line: #342c30;
}

/* ── Base Styles ── */
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-body);
  background: var(--color-surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--color-heading);
  line-height: var(--leading-tight);
}

code, pre, kbd, samp {
  font-family: var(--font-mono);
}

a {
  color: var(--brand-primary);
  text-decoration: none;
}
html.dark a {
  color: var(--brand-primary-light);
}

/* ── Standard Header ── */
.coditect-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  border-bottom: 1px solid var(--color-line);
  background: var(--color-surface);
}

.coditect-header .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}

.coditect-header .brand img {
  width: 28px;
  height: 28px;
  border-radius: 6px;
}

.coditect-header .brand-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  color: var(--color-heading);
}

.coditect-header .brand-sub {
  font-size: var(--text-xs);
  color: var(--color-muted);
  letter-spacing: var(--tracking-wider);
}

/* ── Standard Footer ── */
.coditect-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 24px;
  border-top: 1px solid var(--color-line);
  background: var(--color-surface);
  font-size: var(--text-xs);
  color: var(--color-muted);
}

.coditect-footer a {
  color: var(--brand-primary);
}
html.dark .coditect-footer a {
  color: var(--brand-primary-light);
}

/* ── Theme Toggle ── */
.theme-toggle {
  background: none;
  border: 1px solid var(--color-line);
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
  font-size: 12px;
  color: var(--color-muted);
}

/* ── Auth Card ── */
.auth-card {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: 16px;
  padding: 40px;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}

html.dark .auth-card {
  background: var(--color-surface-dim);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
}

/* ── Form Elements ── */
.coditect-input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--color-line);
  border-radius: 10px;
  font-size: var(--text-base);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  color: var(--color-heading);
  background: var(--color-surface);
  outline: none;
}

.coditect-input:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px var(--brand-primary-tint);
}

html.dark .coditect-input {
  background: var(--color-surface-alt);
  border-color: var(--color-line-hard);
  color: var(--color-heading);
}

html.dark .coditect-input:focus {
  border-color: var(--brand-primary-light);
  box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.15);
}

.coditect-btn-primary {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 10px;
  background: var(--brand-primary);
  color: #fff;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  cursor: pointer;
}

.coditect-btn-primary:hover {
  background: var(--brand-primary-hover);
}