/* ============================================================
   Albert Portfolio — Design Tokens
   Linear-inspired dark-mode-first design system.
   ============================================================ */

/* --- Inter Variable + Berkeley Mono fallback ---
   Inter Variable loaded from Google Fonts (closest available).
   Berkeley Mono is proprietary; we substitute JetBrains Mono.
   FLAGGED: ask Albert for licensed Berkeley Mono files. */
@import url("https://rsms.me/inter/inter.css");
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* ---------------- Background surfaces ---------------- */
  --bg-marketing: #08090a;        /* Page canvas (marketing) */
  --bg-marketing-deep: #010102;   /* Deepest black */
  --bg-panel: #0f1011;            /* Panels, sidebars */
  --bg-surface: #191a1b;          /* Elevated surfaces, cards, dropdowns */
  --bg-surface-2: #28282c;        /* Hover/lightest dark surface */

  /* ---------------- Text ---------------- */
  --fg-primary: #f7f8f8;          /* Default near-white */
  --fg-secondary: #d0d6e0;        /* Body, descriptions */
  --fg-tertiary: #8a8f98;         /* Muted, placeholder, metadata */
  --fg-quaternary: #62666d;       /* Disabled, timestamps */

  /* ---------------- Brand & accent (the only chroma) ---------------- */
  --brand-indigo: #5e6ad2;        /* Primary CTA bg */
  --accent-violet: #7170ff;       /* Links, active states */
  --accent-violet-hover: #828fff; /* Hover */
  --accent-lavender: #7a7fad;     /* Security UI */

  /* ---------------- Status ---------------- */
  --status-green: #27a644;
  --status-emerald: #10b981;

  /* ---------------- Borders ---------------- */
  --border-primary: #23252a;
  --border-secondary: #34343a;
  --border-tertiary: #3e3e44;
  --border-subtle: rgba(255, 255, 255, 0.05);
  --border-standard: rgba(255, 255, 255, 0.08);
  --line-tint: #141516;
  --line-tertiary: #18191a;

  /* ---------------- Translucent surface fills ---------------- */
  --surface-fill-1: rgba(255, 255, 255, 0.02);
  --surface-fill-2: rgba(255, 255, 255, 0.04);
  --surface-fill-3: rgba(255, 255, 255, 0.05);

  /* ---------------- Overlay ---------------- */
  --overlay-modal: rgba(0, 0, 0, 0.85);

  /* ---------------- Spacing scale (8px base + optical) ---------------- */
  --space-px: 1px;
  --space-1: 4px;
  --space-1\.5: 7px;   /* optical micro */
  --space-2: 8px;
  --space-2\.5: 11px;  /* optical micro */
  --space-3: 12px;
  --space-3\.5: 19px;
  --space-4: 16px;
  --space-5: 20px;
  --space-5\.5: 22px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 35px;

  /* ---------------- Radius ---------------- */
  --radius-micro: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-card: 8px;
  --radius-panel: 12px;
  --radius-lg: 22px;
  --radius-pill: 9999px;
  --radius-circle: 50%;

  /* ---------------- Shadows / elevation ---------------- */
  --shadow-subtle: rgba(0, 0, 0, 0.03) 0px 1.2px 0px 0px;
  --shadow-ring: rgba(0, 0, 0, 0.2) 0px 0px 0px 1px;
  --shadow-elevated: rgba(0, 0, 0, 0.4) 0px 2px 4px;
  --shadow-inset: rgba(0, 0, 0, 0.2) 0px 0px 12px 0px inset;
  --shadow-focus: rgba(0, 0, 0, 0.1) 0px 4px 12px;
  --shadow-dialog:
    rgba(0, 0, 0, 0)    0px 8px 2px,
    rgba(0, 0, 0, 0.01) 0px 5px 2px,
    rgba(0, 0, 0, 0.04) 0px 3px 2px,
    rgba(0, 0, 0, 0.07) 0px 1px 1px,
    rgba(0, 0, 0, 0.08) 0px 0px 1px;

  /* ---------------- Type families ---------------- */
  --font-sans: "Inter Variable", "Inter", "SF Pro Display", -apple-system,
    system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans",
    "Helvetica Neue", sans-serif;
  --font-mono: "Berkeley Mono", "JetBrains Mono", ui-monospace, "SF Mono",
    Menlo, monospace;

  /* ---------------- OpenType identity ---------------- */
  --inter-features: "cv01", "ss03";

  /* ---------------- Type scale (size / weight / line-height / tracking) ---------------- */
  --fs-display-xl: 72px;     --lh-display-xl: 1.00; --ls-display-xl: -1.584px;
  --fs-display-lg: 64px;     --lh-display-lg: 1.00; --ls-display-lg: -1.408px;
  --fs-display:    48px;     --lh-display:    1.00; --ls-display:    -1.056px;
  --fs-h1:         32px;     --lh-h1:         1.13; --ls-h1:         -0.704px;
  --fs-h2:         24px;     --lh-h2:         1.33; --ls-h2:         -0.288px;
  --fs-h3:         20px;     --lh-h3:         1.33; --ls-h3:         -0.24px;
  --fs-body-lg:    18px;     --lh-body-lg:    1.60; --ls-body-lg:    -0.165px;
  --fs-body-em:    17px;     --lh-body-em:    1.60;
  --fs-body:       16px;     --lh-body:       1.50;
  --fs-small:      15px;     --lh-small:      1.60; --ls-small:      -0.165px;
  --fs-caption-lg: 14px;     --lh-caption-lg: 1.50; --ls-caption-lg: -0.182px;
  --fs-caption:    13px;     --lh-caption:    1.50; --ls-caption:    -0.13px;
  --fs-label:      12px;     --lh-label:      1.40;
  --fs-micro:      11px;     --lh-micro:      1.40;
  --fs-tiny:       10px;     --lh-tiny:       1.50; --ls-tiny:       -0.15px;

  /* The signature trio of weights */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 510;   /* Linear's signature in-between weight */
  --fw-semibold: 590;
}

/* ============================================================
   Base resets so semantic vars work out of the box
   ============================================================ */
html, body {
  background: var(--bg-marketing);
  color: var(--fg-primary);
  font-family: var(--font-sans);
  font-feature-settings: var(--inter-features);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  margin: 0;
}

/* ============================================================
   Semantic typography classes
   Use these instead of styling raw tags so intent is explicit.
   ============================================================ */
.t-display-xl {
  font-family: var(--font-sans); font-feature-settings: var(--inter-features);
  font-size: var(--fs-display-xl); line-height: var(--lh-display-xl);
  letter-spacing: var(--ls-display-xl); font-weight: var(--fw-medium);
  color: var(--fg-primary);
}
.t-display-lg {
  font-family: var(--font-sans); font-feature-settings: var(--inter-features);
  font-size: var(--fs-display-lg); line-height: var(--lh-display-lg);
  letter-spacing: var(--ls-display-lg); font-weight: var(--fw-medium);
  color: var(--fg-primary);
}
.t-display {
  font-family: var(--font-sans); font-feature-settings: var(--inter-features);
  font-size: var(--fs-display); line-height: var(--lh-display);
  letter-spacing: var(--ls-display); font-weight: var(--fw-medium);
  color: var(--fg-primary);
}
.t-h1 {
  font-family: var(--font-sans); font-feature-settings: var(--inter-features);
  font-size: var(--fs-h1); line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1); font-weight: var(--fw-regular);
  color: var(--fg-primary);
}
.t-h2 {
  font-family: var(--font-sans); font-feature-settings: var(--inter-features);
  font-size: var(--fs-h2); line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2); font-weight: var(--fw-regular);
  color: var(--fg-primary);
}
.t-h3 {
  font-family: var(--font-sans); font-feature-settings: var(--inter-features);
  font-size: var(--fs-h3); line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3); font-weight: var(--fw-semibold);
  color: var(--fg-primary);
}
.t-body-lg {
  font-family: var(--font-sans); font-feature-settings: var(--inter-features);
  font-size: var(--fs-body-lg); line-height: var(--lh-body-lg);
  letter-spacing: var(--ls-body-lg); font-weight: var(--fw-regular);
  color: var(--fg-secondary);
}
.t-body {
  font-family: var(--font-sans); font-feature-settings: var(--inter-features);
  font-size: var(--fs-body); line-height: var(--lh-body);
  font-weight: var(--fw-regular); color: var(--fg-secondary);
}
.t-body-medium {
  font-family: var(--font-sans); font-feature-settings: var(--inter-features);
  font-size: var(--fs-body); line-height: var(--lh-body);
  font-weight: var(--fw-medium); color: var(--fg-primary);
}
.t-small {
  font-family: var(--font-sans); font-feature-settings: var(--inter-features);
  font-size: var(--fs-small); line-height: var(--lh-small);
  letter-spacing: var(--ls-small); font-weight: var(--fw-regular);
  color: var(--fg-tertiary);
}
.t-caption {
  font-family: var(--font-sans); font-feature-settings: var(--inter-features);
  font-size: var(--fs-caption); line-height: var(--lh-caption);
  letter-spacing: var(--ls-caption); font-weight: var(--fw-regular);
  color: var(--fg-tertiary);
}
.t-label {
  font-family: var(--font-sans); font-feature-settings: var(--inter-features);
  font-size: var(--fs-label); line-height: var(--lh-label);
  font-weight: var(--fw-medium); color: var(--fg-secondary);
}
.t-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-caption-lg); line-height: var(--lh-caption-lg);
  font-weight: var(--fw-regular); color: var(--fg-secondary);
}

/* ============================================================
   Component primitives — reach for these for prototypes.
   ============================================================ */

/* Buttons --------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 32px; padding: 0 12px;
  font-family: var(--font-sans); font-feature-settings: var(--inter-features);
  font-size: var(--fs-caption-lg); font-weight: var(--fw-medium);
  letter-spacing: -0.01em;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-standard);
  background: var(--surface-fill-1);
  color: #e2e4e7;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.btn:hover { background: var(--surface-fill-3); color: var(--fg-primary); }
.btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

.btn--primary {
  background: var(--brand-indigo);
  border-color: transparent;
  color: #ffffff;
}
.btn--primary:hover { background: var(--accent-violet-hover); }

.btn--subtle {
  background: var(--surface-fill-2);
  color: var(--fg-secondary);
  border-color: var(--border-subtle);
}

.btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--fg-secondary);
}
.btn--ghost:hover { background: var(--surface-fill-2); color: var(--fg-primary); }

.btn--icon {
  width: 32px; padding: 0; justify-content: center;
  border-radius: var(--radius-circle);
  background: var(--surface-fill-2);
}

/* Card --------------------------------------------------- */
.card {
  background: var(--surface-fill-1);
  border: 1px solid var(--border-standard);
  border-radius: var(--radius-card);
  padding: var(--space-5);
}

/* Pill --------------------------------------------------- */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 10px 0 10px;
  height: 22px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-primary);
  background: transparent;
  color: var(--fg-secondary);
  font-size: var(--fs-label); font-weight: var(--fw-medium);
}

/* Input --------------------------------------------------- */
.input {
  display: block; width: 100%;
  background: var(--surface-fill-1);
  color: var(--fg-secondary);
  border: 1px solid var(--border-standard);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  font-family: var(--font-sans); font-feature-settings: var(--inter-features);
  font-size: var(--fs-caption-lg); line-height: 1.4;
  outline: none;
  transition: border-color 120ms ease, background 120ms ease;
}
.input::placeholder { color: var(--fg-quaternary); }
.input:focus { border-color: rgba(113, 112, 255, 0.5); }