/* =========================================================
   Linear Design System — colors_and_type.css
   Source: DESIGN.md (Linear-design-analysis, alpha)
   Fonts: Inter (display+text) + JetBrains Mono (mono) as the
   recommended free substitutes for Linear's proprietary
   Linear Display / Linear Text / Linear Mono.
   ========================================================= */

@import url('fonts/fonts.css');

:root {
  /* ---------- Color: brand & accent ---------- */
  --color-primary:        #5e6ad2; /* Lavender-blue — CTA, brand mark, links */
  --color-on-primary:     #ffffff;
  --color-primary-hover:  #828fff; /* Lighter lavender — primary CTA hover */
  --color-primary-focus:  #5e69d1; /* Focus ring tint */
  --color-brand-secure:   #7a7fad; /* Muted lavender-gray, Security surfaces */

  /* ---------- Color: surface ladder ---------- */
  --color-canvas:            #010102; /* Near-pure black, faint blue tint */
  --color-surface-1:         #0f1011; /* default cards / product panels */
  --color-surface-2:         #141516; /* featured / hovered cards */
  --color-surface-3:         #18191a; /* sub-nav, dropdowns */
  --color-surface-4:         #191a1b; /* bg-level-3, deepest lift */
  --color-hairline:          #23252a; /* 1px borders, dividers */
  --color-hairline-strong:   #34343a; /* input focus, stronger rules */
  --color-hairline-tertiary: #3e3e44; /* nested surface borders */

  /* ---------- Color: inverse (rare light surfaces) ---------- */
  --color-inverse-canvas:    #ffffff;
  --color-inverse-surface-1: #f5f6f6;
  --color-inverse-surface-2: #f6f7f7;
  --color-inverse-ink:       #000000;

  /* ---------- Color: text (ink ladder) ---------- */
  --color-ink:          #f7f8f8; /* Headlines, primary body */
  --color-ink-muted:    #d0d6e0; /* Secondary type */
  --color-ink-subtle:   #8a8f98; /* Tertiary type, deselected tabs */
  --color-ink-tertiary: #62666d; /* Quaternary, disabled, footnotes */

  /* ---------- Color: semantic ---------- */
  --color-success: #27a644; /* The only semantic color on marketing */
  --color-overlay: #000000; /* modal scrim */

  /* ---------- In-product status colors (issue priorities/labels) ---------- */
  --status-backlog:    #95a2b3;
  --status-todo:       #e2e2e2;
  --status-progress:   #f2c94c;
  --status-done:       #5e6ad2;
  --status-canceled:   #95a2b3;
  --status-urgent:     #eb5757;
  --status-high:       #f2994a;
  --status-medium:     #f2c94c;
  --status-low:        #95a2b3;

  /* ---------- Radii ---------- */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;   /* buttons, inputs */
  --radius-lg:   12px;  /* cards */
  --radius-xl:   16px;  /* product screenshot panels */
  --radius-xxl:  24px;  /* rare oversized CTA banners */
  --radius-pill: 9999px;
  --radius-full: 9999px;

  /* ---------- Spacing (4px base) ---------- */
  --space-xxs: 4px;
  --space-xs:  8px;
  --space-sm:  12px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-xxl: 48px;
  --space-section: 96px;

  /* ---------- Type families ---------- */
  --font-display: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
  --font-text:    'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ---------- Type tokens (size / weight / lh / tracking) ---------- */
  --type-display-xl-size:  80px; --type-display-xl-weight: 600; --type-display-xl-lh: 1.05; --type-display-xl-tracking: -3.0px;
  --type-display-lg-size:  56px; --type-display-lg-weight: 600; --type-display-lg-lh: 1.10; --type-display-lg-tracking: -1.8px;
  --type-display-md-size:  40px; --type-display-md-weight: 600; --type-display-md-lh: 1.15; --type-display-md-tracking: -1.0px;
  --type-headline-size:    28px; --type-headline-weight:   600; --type-headline-lh:   1.20; --type-headline-tracking:   -0.6px;
  --type-card-title-size:  22px; --type-card-title-weight: 500; --type-card-title-lh: 1.25; --type-card-title-tracking: -0.4px;
  --type-subhead-size:     20px; --type-subhead-weight:    400; --type-subhead-lh:    1.40; --type-subhead-tracking:    -0.2px;
  --type-body-lg-size:     18px; --type-body-lg-weight:    400; --type-body-lg-lh:    1.50; --type-body-lg-tracking:    -0.1px;
  --type-body-size:        16px; --type-body-weight:       400; --type-body-lh:       1.50; --type-body-tracking:       -0.05px;
  --type-body-sm-size:     14px; --type-body-sm-weight:    400; --type-body-sm-lh:    1.50; --type-body-sm-tracking:    0;
  --type-caption-size:     12px; --type-caption-weight:    400; --type-caption-lh:    1.40; --type-caption-tracking:    0;
  --type-button-size:      14px; --type-button-weight:     500; --type-button-lh:     1.20; --type-button-tracking:     0;
  --type-eyebrow-size:     13px; --type-eyebrow-weight:    500; --type-eyebrow-lh:    1.30; --type-eyebrow-tracking:    0.4px;
  --type-mono-size:        13px; --type-mono-weight:       400; --type-mono-lh:       1.50; --type-mono-tracking:       0;

  /* ---------- Elevation ----------
     Linear avoids drop shadow on dark. Hierarchy = surface ladder + 1px hairline.
     The top-edge hint below is the "pixel rendered" highlight noted in DESIGN.md. */
  --edge-top: inset 0 1px 0 rgba(255,255,255,0.04);
  --shadow-overlay: 0 12px 32px rgba(0,0,0,0.6), 0 0 0 1px var(--color-hairline);
  --focus-ring: 0 0 0 2px rgba(94, 105, 210, 0.5); /* primary-focus @ 50% */
}

/* =========================================================
   Base
   ========================================================= */
html, body {
  background: var(--color-canvas);
  color: var(--color-ink);
  font-family: var(--font-text);
  font-size: var(--type-body-size);
  line-height: var(--type-body-lh);
  letter-spacing: var(--type-body-tracking);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: rgba(94,105,210,0.4); color: var(--color-ink); }

/* =========================================================
   Semantic type classes (apply as .display-xl, .h1, .body, etc.)
   ========================================================= */
.display-xl, .h-display-xl {
  font-family: var(--font-display); font-size: var(--type-display-xl-size);
  font-weight: var(--type-display-xl-weight); line-height: var(--type-display-xl-lh);
  letter-spacing: var(--type-display-xl-tracking);
}
.display-lg, .h-display-lg {
  font-family: var(--font-display); font-size: var(--type-display-lg-size);
  font-weight: var(--type-display-lg-weight); line-height: var(--type-display-lg-lh);
  letter-spacing: var(--type-display-lg-tracking);
}
.display-md, h1, .h1 {
  font-family: var(--font-display); font-size: var(--type-display-md-size);
  font-weight: var(--type-display-md-weight); line-height: var(--type-display-md-lh);
  letter-spacing: var(--type-display-md-tracking);
}
.headline, h2, .h2 {
  font-family: var(--font-display); font-size: var(--type-headline-size);
  font-weight: var(--type-headline-weight); line-height: var(--type-headline-lh);
  letter-spacing: var(--type-headline-tracking);
}
.card-title, h3, .h3 {
  font-family: var(--font-display); font-size: var(--type-card-title-size);
  font-weight: var(--type-card-title-weight); line-height: var(--type-card-title-lh);
  letter-spacing: var(--type-card-title-tracking);
}
.subhead, h4, .h4 {
  font-family: var(--font-display); font-size: var(--type-subhead-size);
  font-weight: var(--type-subhead-weight); line-height: var(--type-subhead-lh);
  letter-spacing: var(--type-subhead-tracking);
  color: var(--color-ink-muted);
}
.body-lg {
  font-family: var(--font-text); font-size: var(--type-body-lg-size);
  font-weight: var(--type-body-lg-weight); line-height: var(--type-body-lg-lh);
  letter-spacing: var(--type-body-lg-tracking);
}
p, .body {
  font-family: var(--font-text); font-size: var(--type-body-size);
  font-weight: var(--type-body-weight); line-height: var(--type-body-lh);
  letter-spacing: var(--type-body-tracking);
}
.body-sm, small {
  font-family: var(--font-text); font-size: var(--type-body-sm-size);
  font-weight: var(--type-body-sm-weight); line-height: var(--type-body-sm-lh);
  letter-spacing: var(--type-body-sm-tracking);
}
.caption {
  font-family: var(--font-text); font-size: var(--type-caption-size);
  font-weight: var(--type-caption-weight); line-height: var(--type-caption-lh);
  letter-spacing: var(--type-caption-tracking);
  color: var(--color-ink-subtle);
}
.eyebrow {
  font-family: var(--font-text); font-size: var(--type-eyebrow-size);
  font-weight: var(--type-eyebrow-weight); line-height: var(--type-eyebrow-lh);
  letter-spacing: var(--type-eyebrow-tracking);
  color: var(--color-ink-subtle);
  text-transform: none;
}
.btn-label {
  font-family: var(--font-text); font-size: var(--type-button-size);
  font-weight: var(--type-button-weight); line-height: var(--type-button-lh);
  letter-spacing: var(--type-button-tracking);
}
code, .mono {
  font-family: var(--font-mono); font-size: var(--type-mono-size);
  font-weight: var(--type-mono-weight); line-height: var(--type-mono-lh);
  letter-spacing: var(--type-mono-tracking);
}

a { color: var(--color-ink); text-decoration: none; }
a:hover { color: var(--color-primary-hover); }