/* ============================================================
   AUTOCLIENT — Colors & Type Foundations
   Brand typeface: Silka (atypo foundry)
   Source: autoclient brand identity guidelines (2025)
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face { font-family: "Silka"; src: url("fonts/Silka-Thin.otf") format("opentype"); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: "Silka"; src: url("fonts/Silka-ThinItalic.otf") format("opentype"); font-weight: 100; font-style: italic; font-display: swap; }
@font-face { font-family: "Silka"; src: url("fonts/Silka-ExtraLight.otf") format("opentype"); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: "Silka"; src: url("fonts/Silka-ExtraLightItalic.otf") format("opentype"); font-weight: 200; font-style: italic; font-display: swap; }
@font-face { font-family: "Silka"; src: url("fonts/Silka-Light.otf") format("opentype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Silka"; src: url("fonts/Silka-LightItalic.otf") format("opentype"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Silka"; src: url("fonts/Silka-Regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Silka"; src: url("fonts/Silka-RegularItalic.otf") format("opentype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Silka"; src: url("fonts/Silka-Medium.otf") format("opentype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Silka"; src: url("fonts/Silka-MediumItalic.otf") format("opentype"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Silka"; src: url("fonts/Silka-SemiBold.otf") format("opentype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Silka"; src: url("fonts/Silka-SemiBoldItalic.otf") format("opentype"); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Silka"; src: url("fonts/Silka-Bold.otf") format("opentype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Silka"; src: url("fonts/Silka-BoldItalic.otf") format("opentype"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Silka"; src: url("fonts/Silka-Black.otf") format("opentype"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Silka"; src: url("fonts/Silka-BlackItalic.otf") format("opentype"); font-weight: 900; font-style: italic; font-display: swap; }

:root {
  /* ---------- Core palette (verbatim from guidelines) ---------- */
  --auto-black:      #231F20;  /* Primary background */
  --auto-purple:     #8784FD;  /* Accent — periwinkle/purple */
  --auto-violet:     #CC99FF;  /* Information */
  --auto-coral:      #FF6666;  /* Accent */
  --auto-peach:      #FFCCCC;  /* Secondary */
  --auto-pink:       #FF99CC;  /* Information */
  --auto-off-white:  #F9F8F6;  /* Secondary background */
  --auto-white:      #FFFFFF;

  /* ---------- Brand gradient (auto[gradient]) ----------
     Sweeps the symbol's hues: purple → violet → pink → coral.
     The primary gradient for backgrounds & the symbol mask. */
  --auto-gradient: linear-gradient(135deg, #8784FD 0%, #CC99FF 34%, #FF99CC 66%, #FF6666 100%);
  --auto-gradient-soft: linear-gradient(135deg, #A9A7FE 0%, #DDBBFF 40%, #FFC2DD 72%, #FF9090 100%);
  --auto-gradient-radial: radial-gradient(120% 120% at 20% 10%, #8784FD 0%, #CC99FF 35%, #FF99CC 68%, #FF6666 100%);
  /* Symbol-mask gradient: the brand's signature angled sweep used inside the triangle */
  --auto-gradient-symbol: linear-gradient(150deg, #8784FD 8%, #B58FFB 38%, #FF9CC4 70%, #FF6B6B 100%);

  /* ---------- Semantic surfaces ---------- */
  --bg-primary:   var(--auto-black);    /* the brand's default dark stage */
  --bg-secondary: var(--auto-off-white);/* light surface */
  --bg-elevated:  #2E2A2B;              /* raised card on dark */
  --bg-sunken:    #1A1718;              /* recessed on dark */

  /* ---------- Foreground / text ---------- */
  --fg-on-dark-1: #F9F8F6;  /* primary text on dark */
  --fg-on-dark-2: rgba(249,248,246,0.66); /* secondary text on dark */
  --fg-on-dark-3: rgba(249,248,246,0.42); /* tertiary / captions on dark */
  --fg-on-light-1: #231F20; /* primary text on light */
  --fg-on-light-2: rgba(35,31,32,0.62);   /* secondary text on light */
  --fg-on-light-3: rgba(35,31,32,0.40);   /* tertiary on light */

  /* ---------- Lines & strokes ---------- */
  --line-on-dark:  rgba(249,248,246,0.14);
  --line-on-light: rgba(35,31,32,0.12);
  --line-strong-dark: rgba(249,248,246,0.28);

  /* ---------- Type families ---------- */
  --font-sans: "Silka", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-display: "Silka", "Helvetica Neue", Arial, sans-serif;

  /* ---------- Weights (per guidelines) ----------
     Headlines: Thin / ExtraLight / Light
     Body: Regular / Medium
     Emphasis: SemiBold / Bold */
  --w-thin: 100;
  --w-extralight: 200;
  --w-light: 300;
  --w-regular: 400;
  --w-medium: 500;
  --w-semibold: 600;
  --w-bold: 700;
  --w-black: 900;

  /* ---------- Type scale (display-led, generous) ---------- */
  --fs-display: clamp(3.5rem, 7vw, 6.5rem);  /* hero — Thin/ExtraLight */
  --fs-h1: clamp(2.75rem, 5vw, 4.25rem);
  --fs-h2: clamp(2rem, 3.4vw, 3rem);
  --fs-h3: 2rem;
  --fs-h4: 1.5rem;
  --fs-title: 1.25rem;
  --fs-body-lg: 1.125rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-caption: 0.75rem;
  --fs-overline: 0.6875rem;

  --lh-tight: 1.02;
  --lh-snug: 1.12;
  --lh-display: 1.06;
  --lh-body: 1.6;
  --lh-relaxed: 1.75;

  /* Tracking — Silka headlines look best slightly tightened; overlines wide */
  --ls-display: -0.02em;
  --ls-heading: -0.015em;
  --ls-body: 0em;
  --ls-overline: 0.22em;

  /* ---------- Spacing scale (4px base) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* ---------- Radii ---------- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* ---------- Shadows / elevation ----------
     Soft, low-contrast on light; on dark, elevation reads through
     lighter surface + subtle gradient glow rather than heavy shadow. */
  --shadow-sm: 0 1px 2px rgba(35,31,32,0.06), 0 1px 3px rgba(35,31,32,0.05);
  --shadow-md: 0 4px 12px rgba(35,31,32,0.08), 0 2px 4px rgba(35,31,32,0.04);
  --shadow-lg: 0 18px 48px rgba(35,31,32,0.14), 0 6px 14px rgba(35,31,32,0.06);
  --shadow-glow: 0 12px 48px rgba(135,132,253,0.35);  /* purple brand glow */
  --shadow-glow-coral: 0 12px 48px rgba(255,102,102,0.30);

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;
}

/* ============================================================
   Semantic element defaults — opt in by adding class "auto-type"
   to a container, or use these as a reference for components.
   ============================================================ */
.auto-type {
  font-family: var(--font-sans);
  color: var(--fg-on-light-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.auto-display {
  font-family: var(--font-display);
  font-weight: var(--w-extralight);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}
.auto-h1 { font-weight: var(--w-light); font-size: var(--fs-h1); line-height: var(--lh-snug); letter-spacing: var(--ls-heading); }
.auto-h2 { font-weight: var(--w-light); font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: var(--ls-heading); }
.auto-h3 { font-weight: var(--w-regular); font-size: var(--fs-h3); line-height: var(--lh-snug); letter-spacing: var(--ls-heading); }
.auto-h4 { font-weight: var(--w-medium); font-size: var(--fs-h4); line-height: 1.25; }
.auto-title { font-weight: var(--w-semibold); font-size: var(--fs-title); line-height: 1.3; }
.auto-body-lg { font-weight: var(--w-regular); font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); }
.auto-body { font-weight: var(--w-regular); font-size: var(--fs-body); line-height: var(--lh-body); }
.auto-small { font-weight: var(--w-regular); font-size: var(--fs-small); line-height: 1.5; }
.auto-caption { font-weight: var(--w-medium); font-size: var(--fs-caption); line-height: 1.4; color: var(--fg-on-light-3); }
.auto-overline {
  font-weight: var(--w-semibold);
  font-size: var(--fs-overline);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
}

/* Gradient text — the brand's signature accent treatment */
.auto-gradient-text {
  background: var(--auto-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}