/* Brand palette → Linear-style semantic tokens */
:root {
  /* Brand — source of truth */
  --brand-white: #f0f0f0;
  --brand-white-dark: #b9b9b9;
  --brand-white-darker: #808087;
  --brand-gray: #131313;
  --brand-gray-light: #1d1d1d;
  --brand-gray-dark: #0f0f0f;
  --brand-outline: #222222;
  --brand-bg: #070707;
  --brand-bg-mid: #0e0e0e;
  --brand-bg-radial: radial-gradient(
    ellipse 150% 100% at 50% -12%,
    #1a1a1a 0%,
    #141414 10%,
    #101010 22%,
    #0c0c0c 38%,
    #090909 52%,
    var(--brand-bg) 72%,
    var(--brand-bg) 100%
  );
  --brand-green: #22c55e;
  --brand-green-dark: #14371e;
  --brand-green-faded: #22c55e40;
  --brand-yellow: #eab308;
  --brand-yellow-dark: #40330f;
  --brand-yellow-faded: #eab30840;
  --brand-red: #bb3a3a;
  --brand-red-dark: #381918;
  --brand-red-faded: #bb3a3a40;
  --brand-blue: #0075c9;
  --brand-blue-dark: #03538e;
  --brand-blue-faded: #0075c940;

  /* Brand alpha mixes — rgba from brand hex (avoid color-mix + transparent washout) */
  --brand-blue-a04: rgba(0, 117, 201, 0.04);
  --brand-blue-a05: rgba(0, 117, 201, 0.05);
  --brand-blue-a07: rgba(0, 117, 201, 0.07);
  --brand-blue-a10: rgba(0, 117, 201, 0.1);
  --brand-blue-a12: rgba(0, 117, 201, 0.12);
  --brand-blue-a16: rgba(0, 117, 201, 0.16);
  --brand-blue-a28: rgba(0, 117, 201, 0.28);
  --brand-blue-a42: rgba(0, 117, 201, 0.42);
  --brand-blue-a50: rgba(0, 117, 201, 0.5);
  --brand-gray-light-a35: rgba(29, 29, 29, 0.35);
  --brand-gray-light-a40: rgba(29, 29, 29, 0.4);
  --brand-gray-light-a45: rgba(29, 29, 29, 0.45);
  --brand-gray-light-a50: rgba(29, 29, 29, 0.5);
  --brand-gray-a20: rgba(19, 19, 19, 0.2);
  --brand-gray-a22: rgba(19, 19, 19, 0.22);
  --brand-bg-a12: rgba(7, 7, 7, 0.12);
  --brand-bg-a18: rgba(7, 7, 7, 0.18);
  --brand-bg-a35: rgba(7, 7, 7, 0.35);
  --brand-bg-a50: rgba(7, 7, 7, 0.5);
  --brand-bg-a55: rgba(7, 7, 7, 0.55);
  --brand-bg-a85: rgba(7, 7, 7, 0.85);
  --brand-white-a02: rgba(255, 255, 255, 0.02);
  --brand-white-a03: rgba(255, 255, 255, 0.03);
  --brand-white-a04: rgba(255, 255, 255, 0.04);
  --brand-white-a05: rgba(255, 255, 255, 0.05);
  --brand-white-a06: rgba(255, 255, 255, 0.06);
  --brand-white-a08: rgba(255, 255, 255, 0.08);
  --brand-white-a10: rgba(255, 255, 255, 0.1);
  --brand-white-a14: rgba(255, 255, 255, 0.14);
  --brand-white-a16: rgba(255, 255, 255, 0.16);
  --brand-white-a18: rgba(255, 255, 255, 0.18);

  /* Legacy aliases (used across styles.css) */
  --white: var(--brand-white);
  --white-dark: var(--brand-white-dark);
  --white-darker: var(--brand-white-darker);
  --gray: var(--brand-gray);
  --gray-light: var(--brand-gray-light);
  --gray-dark: var(--brand-gray-dark);
  --outline: var(--brand-outline);
  --bg: var(--brand-bg);
  --green: var(--brand-green);
  --yellow: var(--brand-yellow);
  --blue: var(--brand-blue);
  --blue-dark: var(--brand-blue-dark);

  /* Linear-like semantics */
  --color-text-primary: var(--brand-white);
  --color-text-secondary: var(--brand-white-dark);
  --color-text-tertiary: var(--brand-white-darker);
  --color-text-quaternary: rgba(128, 128, 135, 0.85);
  --color-bg-primary: var(--brand-bg);
  --color-bg-secondary: var(--brand-gray-light);
  --color-bg-tertiary: var(--brand-gray);
  --color-bg-panel: var(--brand-gray-light);
  --color-bg-quaternary: var(--brand-gray-dark);
  --color-border-primary: var(--brand-outline);
  --color-border-translucent: rgba(255, 255, 255, 0.08);
  --color-border-highlight: rgba(255, 255, 255, 0.12);
  --color-border-subtle: rgba(255, 255, 255, 0.06);
  --color-border-soft: rgba(255, 255, 255, 0.1);
  --color-accent: var(--brand-blue);
  --color-accent-muted: var(--brand-blue-faded);
  --color-accent-hover: var(--brand-blue-dark);

  /* Layout — wider like Linear homepage (~1344px content) */
  --page-padding-x: clamp(1rem, 4vw, 2rem);
  --page-max-width: 84rem;
  --container: min(calc(100vw - var(--page-padding-x) * 2), var(--page-max-width));
  --homepage-outer-padding: var(--page-padding-x);

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 8rem;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-rounded: 9999px;

  /* Typography scale (Linear-inspired) */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --title-hero-size: clamp(2.75rem, 5.5vw, 4.5rem);
  --title-hero-line: 1.05;
  --title-hero-tracking: -0.035em;
  --title-section-size: clamp(1.75rem, 3vw, 2.25rem);
  --text-regular-size: 0.9375rem;
  --text-regular-line: 1.55;
  --text-small-size: 0.8125rem;
  --text-mini-size: 0.75rem;

  /* Motion */
  --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --speed-quick: 0.12s;
  --speed-regular: 0.16s;
  --speed-slow: 0.28s;

  /* Surfaces */
  --card-bg: rgba(255, 255, 255, 0.02);
  --card-bg-hover: rgba(255, 255, 255, 0.04);
  --card-border: var(--color-border-translucent);
  --card-top-light: none;
  --header-height: 64px;
  --shadow-subtle: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
  --shadow-medium: 0 8px 32px rgba(0, 0, 0, 0.45);

  /* Button tokens */
  --button-height: 36px;
  --button-font-size: 0.875rem;
  --button-padding: 0 14px;
  --button-gap: 6px;
  --button-radius: var(--radius-lg);

  --grid-cell: 88px;
}