/* Koenigsegg-inspired overlay
 * Monolithic black, fine type in all-caps, ultra-thin lines, minimal accent.
 * Loaded LAST so it overrides Ingeno base.
 */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@200;300;400;500;600;700;800&family=Archivo+Narrow:wght@300;400;500;600&family=JetBrains+Mono:wght@300;400;500&display=swap');

:root {
  /* Koenigsegg palette — near-black, cool neutrals, silver/white accents.
     Reference: koenigsegg.com uses #000 backgrounds, high-contrast white type,
     thin cool-grey dividers, and a very restrained red used only for the logo
     and select CTAs. No warm tones. */
  --kg-black: #000000;
  --kg-near:  #080808;
  --kg-card:  #0c0c0d;
  --kg-carbon: #14151a;  /* cool dark grey with a hint of blue */
  --kg-line:  rgba(255,255,255,0.11);
  --kg-line-soft: rgba(255,255,255,0.05);
  --kg-text:  #f4f4f6;
  --kg-text-2: rgba(244,244,246,0.62);
  --kg-text-3: rgba(244,244,246,0.36);
  --kg-silver: #c8ccd3;    /* cool silver for metadata highlights */
  --kg-accent: #c8ccd3;    /* primary accent = silver, not gold */
  --kg-accent-hot: #ffffff;
  --kg-red:    #c8102e;    /* Koenigsegg flag red — use sparingly */

  /* Type stack overrides */
  --font-serif-name: 'Archivo Narrow', 'Archivo', system-ui, sans-serif;
  --font-sans-serif-name: 'Archivo', system-ui, sans-serif;
  --font-mono-name: 'JetBrains Mono', 'Andale Mono', monospace;

  /* Re-map semantics */
  --color-background:  var(--kg-black);
  --color-foreground:  var(--kg-text);
  --color-foreground-subtle: var(--kg-text-2);
  --color-ocre-base:   var(--kg-accent);
  --color-ocre-hot:    var(--kg-red);
  --color-porcelaine-light: var(--kg-text);
  --color-porcelaine-a85: rgba(255,255,255,0.85);
  --color-porcelaine-a70: rgba(255,255,255,0.7);
  --color-porcelaine-a55: var(--kg-text-2);
  --color-porcelaine-a40: var(--kg-text-3);
  --color-porcelaine-a25: var(--kg-line);
  --color-charbon-base: var(--kg-black);
  --color-charbon-dark: var(--kg-near);
}

html, body { background: var(--kg-black); }

/* Type treatment — almost everything uppercase, wide tracking */
h1, h2, h3 {
  font-family: 'Archivo Narrow', system-ui, sans-serif !important;
  font-weight: 300 !important;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
h1 { font-weight: 200 !important; letter-spacing: 0 !important; }

/* Fine dividers replace thick borders */
hr, .kg-hr {
  border: 0;
  border-top: 1px solid var(--kg-line);
  margin: 0;
}

/* Mono micro-labels */
.kg-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--kg-text-3);
}
.kg-label-accent { color: var(--kg-accent); }

/* Radius system — soft, rounded, with true pills for CTAs */
:root {
  --kg-r-sm: 10px;
  --kg-r-md: 16px;
  --kg-r-lg: 24px;
  --kg-r-pill: 9999px;

  /* Status colors — admin publish/pull/bulk-import feedback + warning
     banners. Cool-tinted greens and reds that sit on the monolithic-black
     surface without breaking the restrained palette. */
  --kg-success: #a4d8a9;
  --kg-success-bg: rgba(95, 191, 106, 0.15);
  --kg-success-border: #5fbf6a;
  --kg-danger: #ffb5be;
  --kg-danger-bg: rgba(200, 16, 46, 0.15);
  --kg-danger-border: var(--kg-red);
  --kg-warn: #fde7c3;
  --kg-warn-bg: rgba(214, 163, 99, 0.10);
  --kg-warn-border: rgba(214, 163, 99, 0.45);
}

/* CTA style: pill-shaped ghost button with slide underline */
.kg-btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 16px 28px;
  background: transparent;
  color: var(--kg-text);
  border: 1px solid var(--kg-line);
  font-family: 'Archivo', sans-serif;
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border-radius: var(--kg-r-pill);
  cursor: pointer;
  transition:
    background 260ms cubic-bezier(0.22, 1, 0.36, 1),
    color 260ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 260ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}
.kg-btn:hover { border-color: var(--kg-text); color: var(--kg-text); background: rgba(255,255,255,0.04); }

/* Primary: solid white-on-black at rest. On hover, the weight inverts —
   the button "yields" to a transparent ghost with a thin silver border
   and a subtle 0.985 scale-down. Replaces the previous red-flash hover
   (kept the --kg-red token in case it's wanted elsewhere).
   Motion: asymmetric timing — fast IN (180ms ease-in-out, the button
   commits to the press), slow OUT (380ms ease-out-expo, the button
   releases gently). Asymmetry makes the affordance feel tactile
   rather than reverting. */
.kg-btn-primary {
  background: var(--kg-text);
  color: var(--kg-black);
  border-color: var(--kg-text);
  transition:
    background 380ms cubic-bezier(0.16, 1, 0.3, 1),
    color 380ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 380ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 380ms cubic-bezier(0.16, 1, 0.3, 1);
}
.kg-btn-primary:hover {
  background: transparent;
  color: var(--kg-text);
  border-color: var(--kg-text);
  transform: scale(0.985);
  transition:
    background 180ms cubic-bezier(0.4, 0, 0.2, 1),
    color 180ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 180ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Global rounding — applied aggressively with !important because
   most components use inline styles (which normally beat classes).
   We target structural elements by tag. */
button, a.kg-btn, input, select, textarea {
  border-radius: var(--kg-r-pill) !important;
}

/* Rounded tiles / cards / panels / media surfaces.
   Applied broadly: most divs in this app hold images or panels. */
img, video, picture {
  border-radius: var(--kg-r-md) !important;
}

/* Divs that have a background, shadow, or border — treat as cards */
div[style*="background"]:not([style*="background: transparent"]):not([style*="background:none"]) {
  border-radius: var(--kg-r-md);
}

/* Keep circular elements circular — anything explicitly set to 50% or 9999px stays */
[style*="border-radius: 50%"],
[style*="borderRadius: '50%'"],
[style*="border-radius:50%"],
[style*="border-radius: 9999"],
[style*="borderRadius: 9999"] {
  border-radius: 9999px !important;
}

/* Thin dividers (1px high) should NOT be rounded — keep them as hairlines */
div[style*="height: 1px"],
div[style*="height:1px"],
hr, .kg-hr {
  border-radius: 0 !important;
}