@import "fonts.css";

/**
 * Minimal ShadCN-compatible variables for VR1 theme
 * 
 * This file provides basic compatibility with Olivero theme
 * while ensuring the typography matches ShadCN's clean approach.
 * 
 * Note: Most styling comes directly from basecoat.css
 */

:root {
  /* Font Families - Using Geist and GeistMono */
  --font-sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-serif: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-mono: "GeistMono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  
  /* Core Olivero variables that need to be preserved for layout */
  --max-width: 84.375rem;
  --sp: 1rem !important;
  --content-left: 5.625rem;
  
  /* Map Olivero colors to ShadCN equivalents */
  --color--black: var(--foreground) !important;
  --color--white: var(--background) !important;
  --color--primary-40: var(--primary) !important;
  --color--primary-30: var(--primary) !important;
  --color--primary-50: var(--primary) !important;
  --color--primary-80: var(--primary) !important;
  
  /* Map Olivero text colors */
  --color-text-neutral-soft: var(--muted-foreground) !important;
  --color-text-neutral-medium: var(--foreground) !important;
  --color-text-neutral-loud: var(--foreground) !important;
  --color-text-primary-medium: var(--primary) !important;
  --color-text-primary-loud: var(--primary) !important;

  /* Layout helpers - keeping Olivero's layout sizes */
  --max-width: 84.375rem;
  --max-bg-color: 98.125rem;
  --sp: 1rem !important;
  --content-left: 5.625rem;
  --site-header-height-wide: calc(10 * var(--sp));
  --container-padding: var(--sp);

  /* Grid helpers - keeping Olivero's grid system */
  --scrollbar-width: 0px;
  --grid-col-count: 6;
  --grid-gap: var(--sp);
  --grid-gap-count: calc(var(--grid-col-count) - 1);
  --grid-full-width: calc(100vw - calc(2 * var(--sp)) - var(--scrollbar-width));
  --grid-col-width: calc((var(--grid-full-width) - (var(--grid-gap-count) * var(--grid-gap))) / var(--grid-col-count));

  /* Layout helpers - keeping Olivero's spacing units */
  --sp0-25: calc(0.25 * var(--sp));
  --sp0-5: calc(0.5 * var(--sp));
  --sp0-75: calc(0.75 * var(--sp));
  --sp1: calc(1 * var(--sp));
  --sp1-5: calc(1.5 * var(--sp));
  --sp2: calc(2 * var(--sp));
  --sp2-5: calc(2.5 * var(--sp));
  --sp3: calc(3 * var(--sp));
  --sp3-5: calc(3.5 * var(--sp));
  --sp4: calc(4 * var(--sp));
  --sp4-5: calc(4.5 * var(--sp));
  --sp5: calc(5 * var(--sp));
  --sp6: calc(6 * var(--sp));
  --sp7: calc(7 * var(--sp));
  --sp8: calc(8 * var(--sp));
  --sp9: calc(9 * var(--sp));
  --sp10: calc(10 * var(--sp));
  --sp11: calc(11 * var(--sp));
  --sp12: calc(12 * var(--sp));
  --sp13: calc(13 * var(--sp));

  /* Olivero Gray Palette Mapped to ShadCN Semantic Variables */
  /* These will automatically adapt to dark mode via basecoat.css */
  --color--gray-5: var(--foreground);       /* Olivero Black -> ShadCN Foreground */
  --color--gray-10: var(--foreground);
  --color--gray-20: var(--foreground);      /* Olivero Black 2 -> ShadCN Foreground */
  --color--gray-45: var(--muted-foreground);/* Olivero Gray Dark -> ShadCN Muted Foreground */
  --color--gray-60: var(--muted-foreground);/* Olivero Gray medium -> ShadCN Muted Foreground */
  --color--gray-65: var(--muted-foreground);/* Olivero Black 4 (text) -> ShadCN Muted Foreground */
  --color--gray-70: var(--border);          /* Olivero Gray medium 2 (border/divider) -> ShadCN Border */
  --color--gray-80: var(--input);           /* Light gray (input bg) -> ShadCN Input */
  --color--gray-90: var(--card);            /* Olivero Gray light (card bg) -> ShadCN Card */
  --color--gray-95: var(--border);      /* Olivero Gray light 1 (page bg) -> ShadCN Background */
  --color--gray-100: var(--muted);     /* Olivero Gray light 2 (page bg) -> ShadCN Background */




  /* Olivero Primary Palette Mapped to ShadCN Semantic Variables */
  /* These will automatically adapt to dark mode via basecoat.css */
  --color--primary-20: var(--primary);
  --color--primary-30: var(--primary);
  --color--primary-40: var(--primary); /* Olivero's main primary maps to ShadCN primary */
  --color--primary-50: var(--primary);
  --color--primary-60: var(--primary); /* Lighter shades map to primary; component-specific variations can be handled with opacity or further CSS if needed */
  --color--primary-80: var(--accent);  /* Very light primary, mapped to ShadCN accent or could be a light primary background */

  /* Text colors - mapped to ShadCN equivalents */
  --color-text-neutral-soft: var(--muted-foreground);
  --color-text-neutral-medium: var(--foreground);
  --color-text-neutral-loud: var(--foreground);
  --color-text-primary-medium: var(--primary);
  --color-text-primary-loud: var(--primary);

  /* Named Colors - keeping direct colors with slight ShadCN adjustments */
  --color--black: var(--foreground); /* ShadCN foreground */
  --color--white: var(--background); /* ShadCN background */
  --color--red: var(--destructive); /* ShadCN destructive */
  --color--gold: #fdca40; /* No direct equivalent, keeping original */
  --color--green: #10b981; /* ShadCN success color */

  /* Header */
  --header-height-wide-when-fixed: var(--sp6);

  /* Width of slide out navigation */
  --mobile-nav-width: 31.25rem;

  /* Border radius - matched to ShadCN */
  --border-radius: var(--radius);
}

/* Media queries - keeping Olivero's responsive breakpoints */
@media (min-width: 75rem) {
  :root {
    --container-padding: var(--sp2);
  }
}

@media (min-width: 43.75rem) {
  :root {
    --grid-col-count: 14;
    --grid-gap: var(--sp2);
  }
}

@media (min-width: 62.5rem) {
  :root {
    --scrollbar-width: 0.9375rem;
  }
}

@media (min-width: 75rem) {
  :root {
    --grid-full-width: calc(100vw - var(--scrollbar-width) - var(--content-left) - var(--sp4));
  }
}

@media (min-width: 90rem) {
  :root {
    --grid-full-width: calc(var(--max-width) - var(--sp4));
  }
}




/* Voxread views */
.book-thumbnail img {
  border-radius: 12px; /* or 50% for circles */
  box-shadow: 0 2px 8px rgba(0,0,0,0.2); /* optional for pop */
}
/* Voxread brand accent (deliberate exception to the neutral shadcn palette): play button, progress, selected states. 2026-10-22 */
:root{--vx-accent:#e65100;--vx-accent-hover:color-mix(in oklab,var(--vx-accent) 85%,white);--vx-accent-soft:color-mix(in oklab,var(--vx-accent) 22%,transparent)}
/* Voxread 2026-10-22: radius scale on the shadcn --radius (1rem), and one focus ring for all vx components. */
:root{--vx-r-xs:calc(var(--radius) - 12px);--vx-r-sm:calc(var(--radius) - 8px);--vx-r-md:calc(var(--radius) - 4px);--vx-r-lg:var(--radius);--vx-r-pill:9999px}
:is(.vxp,.vxp-sheet,.vxp-toast,.vx-desc,.vx-bh,.vx-lb,.vx-ex,.vx-dlg,.vx-char,.vx-hero-sub,.vx-hero-rotate) :is(a,button,input,select,[tabindex]):focus-visible,
:is(.vx-bh-cover,.vx-ex-card):focus-visible{outline:2px solid var(--ring);outline-offset:2px}