/* charbel.builds — design tokens
   Layout concept: left-aligned, typographic hero led by the brand chevron (a command prompt),
   proof (real client work) directly under it, one deep-violet "night" band for systems + founder.
   Light theme is the default; dark mirrors it. The night band keeps the colour of the portrait's backdrop. */

:root {
  /* colour */
  --paper: #f7f6fa;        /* page ground, faint violet bias */
  --paper-2: #efedf5;      /* raised/quiet surfaces */
  --ink: #16121f;          /* text */
  --muted: #5e5870;        /* secondary text */
  --line: #e1dde9;         /* hairlines, frame borders */
  --violet: #7c3aed;       /* brand: chevron, primary action */
  --violet-ink: #ffffff;   /* text on violet */
  --night: #140f25;        /* deep band, matches portrait backdrop */
  --night-ink: #ece9f4;
  --night-muted: #a7a0bc;
  --night-line: #2b2340;
  --focus: #7c3aed;
  --chrome: #f4f3f8;       /* light browser chrome around screenshots on the night band (same in both themes) */
  --chrome-line: #e6e3ee;
  --chrome-dot: #d9d5e3;
  --brand: #7c3aed;         /* fixed brand purple (same in both themes) */
  --bubble: #ffffff;        /* chat bubbles in testimonials */
  --bubble-ink: #16121f;
  --good: #0a8f4f;          /* Lighthouse score bands */
  --average: #c2410c;
  --poor: #c81e1e;
  --frame-line: #dcd7e6;   /* thin border around screenshots */
  --shadow-frame: 0 1px 2px rgb(22 18 31 / 0.06), 0 12px 28px -10px rgb(22 18 31 / 0.16), 0 28px 60px -24px rgb(124 58 237 / 0.22);

  /* type */
  --font: "Schibsted Grotesk", "Helvetica Neue", Arial, system-ui, sans-serif;
  --fs-hero: clamp(2.75rem, 6.4vw, 5.5rem);
  --fs-h2: clamp(1.9rem, 3.6vw, 3rem);
  --fs-h3: 1.25rem;
  --fs-lead: clamp(1.075rem, 1.4vw, 1.25rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;

  /* space + shape */
  --space-section: clamp(4.5rem, 10vw, 8.5rem);
  --wrap: 90rem;
  --gutter: clamp(20px, 5.5vw, 80px);
  --radius-frame: 12px;
  --radius-button: 999px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0e0b16;
    --paper-2: #17121f;
    --ink: #eeebf5;
    --muted: #a49eb6;
    --line: #2a2437;
    --violet: #9b6bff;
    --violet-ink: #0e0b16;
    --night: #1a1430;
    --night-ink: #ece9f4;
    --night-muted: #a7a0bc;
    --night-line: #322a4a;
    --focus: #b996ff;
    --frame-line: #342c47;
    --bubble: #241d33;
    --bubble-ink: #eeebf5;
    --good: #3ddc84;
    --average: #fb923c;
    --poor: #f87171;
    --shadow-frame: 0 1px 2px rgb(0 0 0 / 0.4), 0 14px 32px -10px rgb(0 0 0 / 0.55), 0 30px 64px -24px rgb(155 107 255 / 0.25);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --paper: #0e0b16;
  --paper-2: #17121f;
  --ink: #eeebf5;
  --muted: #a49eb6;
  --line: #2a2437;
  --violet: #9b6bff;
  --violet-ink: #0e0b16;
  --night: #1a1430;
  --night-ink: #ece9f4;
  --night-muted: #a7a0bc;
  --night-line: #322a4a;
  --focus: #b996ff;
  --frame-line: #342c47;
  --bubble: #241d33;
  --bubble-ink: #eeebf5;
  --good: #3ddc84;
  --average: #fb923c;
  --poor: #f87171;
  --shadow-frame: 0 1px 2px rgb(0 0 0 / 0.4), 0 14px 32px -10px rgb(0 0 0 / 0.55), 0 30px 64px -24px rgb(155 107 255 / 0.25);
  color-scheme: dark;
}