/* Let it Cast — design tokens */
:root {
  /* Brand */
  --lic-paper: #FFFFFF;
  --lic-paper-2: #FAFAFB;
  --lic-paper-3: #F4F4F6;
  --lic-mist: #E2E6F3;         /* brand light */
  --lic-mist-soft: #ECEFF8;
  --lic-line: #E6E6EC;
  --lic-line-strong: #D6D6DE;
  --lic-ink: #0A0A0B;          /* near black */
  --lic-ink-2: #1B1B1B;        /* brand dark */
  --lic-ink-3: #272728;        /* brand dark accent */
  --lic-muted: #6B6B73;
  --lic-muted-2: #9999A1;

  /* Accents — from logo color bars */
  --lic-yellow: #FFC400;
  --lic-red: #E5283A;
  --lic-blue: #1E5AF5;

  /* Rating semantic */
  --lic-no:    #E5283A;
  --lic-maybe: #F5B400;
  --lic-yes:   #16A34A;

  /* Type */
  --font-display: "Bricolage Grotesque", "Geist", system-ui, sans-serif;
  --font-ui: "Geist", "DM Sans", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* Radius */
  --r-1: 6px;
  --r-2: 10px;
  --r-3: 14px;
  --r-4: 20px;
  --r-pill: 999px;

  /* Shadow */
  --sh-1: 0 1px 2px rgba(10,10,11,0.04), 0 0 0 1px rgba(10,10,11,0.05);
  --sh-2: 0 2px 8px rgba(10,10,11,0.06), 0 0 0 1px rgba(10,10,11,0.06);
  --sh-3: 0 12px 32px rgba(10,10,11,0.10), 0 0 0 1px rgba(10,10,11,0.06);
}

/* Global resets that only target our own surfaces */
.lic, .lic * { box-sizing: border-box; }
.lic {
  font-family: var(--font-ui);
  color: var(--lic-ink);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "cv11";
}
.lic-display { font-family: var(--font-display); letter-spacing: -0.02em; }
.lic-mono { font-family: var(--font-mono); }

/* Utility */
.lic-paper { background: var(--lic-paper); }
.lic-mist  { background: var(--lic-mist); }
.lic-ink-bg { background: var(--lic-ink-2); color: #fff; }

/* Subtle dotted/striped placeholder for media */
.lic-placeholder {
  background:
    repeating-linear-gradient(135deg, transparent 0 14px, rgba(10,10,11,0.04) 14px 15px),
    linear-gradient(180deg, #ECEFF8 0%, #E2E6F3 100%);
}
.lic-placeholder-dark {
  background:
    repeating-linear-gradient(135deg, transparent 0 14px, rgba(255,255,255,0.04) 14px 15px),
    linear-gradient(180deg, #1B1B1B 0%, #0A0A0B 100%);
}