/* Venturi Design System - core tokens and components */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&display=swap');

:root{
  /* Token mappings (enforcement.cssVariables.map) */
  --venturi-bg: #1A1A1A;
  --venturi-surface: #0F0F10;
  --venturi-surface-elevated: #151516;
  --venturi-text: #FFFFFF;
  --venturi-text-secondary: #B3B3B3;
  --venturi-cta: #00B3B3;
  --venturi-highlight: #FF8C42;
  --venturi-border: #2A2A2A;
  --venturi-radius-sm: 6px;
  --venturi-radius-md: 8px;
  --venturi-radius-lg: 12px;
  --venturi-shadow-sm: 0 2px 6px rgba(0,0,0,0.35);
  --venturi-shadow-md: 0 6px 16px rgba(0,0,0,0.4);
  --venturi-shadow-lg: 0 12px 24px rgba(0,0,0,0.45);
  --venturi-duration-sm: 180ms;
  --venturi-duration-md: 240ms;
  --venturi-ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --venturi-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Base */
html,body{ height:100%; }
body{
  margin:0;
  background-color: var(--venturi-bg);
  /* sitewide texture (behind content, not video elements). First layer = texture, second = solid fallback */
  background-image: url('images/texture-dark.png'), linear-gradient(var(--venturi-bg), var(--venturi-bg));
  background-repeat: repeat, no-repeat;
  background-size: 512px 512px, auto;
  background-attachment: fixed, fixed;
  color:var(--venturi-text);
  font-family:'Inter','Segoe UI',Roboto,Arial,sans-serif;
}
/* opt-out if a page needs a plain solid background */
body.plain-body{ background: var(--venturi-bg) !important; }
/* Generic header styles (excluding .venturi-header which has its own component styles) */
header:not(.venturi-header){ display:flex; gap:8px; align-items:center; margin:16px; }

/* Forms */
input, select, button{ padding:8px 10px; border-radius:var(--venturi-radius-sm); border:1px solid var(--venturi-border); background:var(--venturi-surface); color:var(--venturi-text); }
input::placeholder{ color: var(--venturi-text-secondary); }
button{ cursor:pointer; transition: transform var(--venturi-duration-sm) var(--venturi-ease-standard); }
button:active{ transform: scale(0.98); }

/* Buttons */
.v-btn{ border:1px solid transparent; }
.v-btn--primary{ background: var(--venturi-cta); color: var(--venturi-text); box-shadow: 0 0 0 0 rgba(0,179,179,0); }
.v-btn--primary:hover{ background:#00C7C7; box-shadow: 0 0 0 3px rgba(0,179,179,0.15); }
.v-btn--primary:active{ background:#00A0A0; }
.v-btn--secondary{ background: transparent; color: var(--venturi-text); border:1px solid var(--venturi-cta); }
.v-btn--secondary:hover{ background: rgba(0,179,179,0.1); }

/* Card */
.card, .v-card{ background: var(--venturi-surface); border:1px solid var(--venturi-border); border-radius: var(--venturi-radius-md); padding: 16px; box-shadow: var(--venturi-shadow-md); }
.v-card--elevated{ background: var(--venturi-surface-elevated); box-shadow: var(--venturi-shadow-lg); }

/* Layout helpers */
.grid{ display:grid; gap:16px; }
.row{ display:flex; gap:8px; align-items:center; }
.list{ display:flex; flex-direction:column; gap:12px; margin:16px; }
.item{ background: var(--venturi-surface); border:1px solid var(--venturi-border); border-radius: var(--venturi-radius-md); padding: 12px; }
.muted{ color: var(--venturi-text-secondary); font-size: 12px; }

/* Badge */
.badge, .v-badge{ display:inline-block; background: var(--venturi-cta); color: var(--venturi-text); border-radius: 999px; padding:2px 10px; font-size:12px; }
.v-badge--orange{ background: var(--venturi-highlight); }

/* Thumbnail placeholder */
.thumb{ background: var(--venturi-surface-elevated); aspect-ratio: 16/9; display:grid; place-items:center; color: var(--venturi-text-secondary); }

/* Toggle (checkbox replacement) */
.v-toggle{ position:relative; display:inline-flex; width:48px; height:28px; align-items:center; }
.v-toggle input{ position:absolute; opacity:0; width:0; height:0; }
.v-toggle .track{ width:100%; height:100%; background:#3A3A3A; border:1px solid var(--venturi-border); border-radius:9999px; transition: background var(--venturi-duration-sm) var(--venturi-ease-standard); box-shadow: var(--venturi-shadow-sm); }
.v-toggle .knob{ position:absolute; width:24px; height:24px; left:2px; top:2px; border-radius:9999px; background: var(--venturi-surface-elevated); box-shadow: var(--venturi-shadow-sm); transition: transform 220ms cubic-bezier(0.4,0,0.2,1); }
.v-toggle input:checked + .track{ background: linear-gradient(90deg, var(--venturi-cta) 0%, var(--venturi-highlight) 100%); }
.v-toggle input:checked ~ .knob{ transform: translateX(20px); }

/* Containers */
.v-container{ max-width: 1100px; margin: 0 auto; padding: 16px; }

/* Titles */
h1,h2,h3,h4{ margin: 14px 16px 8px; }

/* Long directional shadows (flat look with strong 45° shadows) */
/* Opt-in by adding .flat-long-shadows to the <body> */
.flat-long-shadows .v-card{
  box-shadow:
    /* strong, slightly shorter long shadow down-right */
    4px 4px 0 rgba(0,0,0,.18),
    8px 8px 0 rgba(0,0,0,.16),
    12px 12px 0 rgba(0,0,0,.14),
    16px 16px 0 rgba(0,0,0,.12),
    20px 20px 0 rgba(0,0,0,.10),
    24px 24px 0 rgba(0,0,0,.09),
    28px 28px 0 rgba(0,0,0,.08),
    32px 32px 0 rgba(0,0,0,.07);
}

.flat-long-shadows .v-btn{
  box-shadow:
    3px 3px 0 rgba(0,0,0,.18),
    6px 6px 0 rgba(0,0,0,.16),
    9px 9px 0 rgba(0,0,0,.14),
    12px 12px 0 rgba(0,0,0,.12),
    15px 15px 0 rgba(0,0,0,.10),
    18px 18px 0 rgba(0,0,0,.09);
}

.flat-long-shadows .v-btn:hover{ transform: translateY(-1px); }