/* =============================================================================
   CUSTOM STYLES
   =============================================================================
   
   This file is for YOUR customizations. It loads AFTER the template styles,
   so anything you define here will override the defaults.
   
   The template's core CSS (template.min.css) is minified and shouldn't be 
   edited directly. Use this file instead!
   
   TIP: Uncomment any variable below to customize it. The values shown are
   the template defaults. Change them to whatever you like!
   
   ============================================================================= */

/* =============================================================================
   COLOR SCHEME
   =============================================================================
   
   The template has both light and dark themes. Customize each separately below.
   Users can switch themes in Settings, or it follows their system preference.

   TIP: Use a contrast checker to ensure your colors meet WCAG AA
   standards (4.5:1 ratio for text). The monochrome default is accessible
   out of the box.
   
   ============================================================================= */

/* =============================================================================
   PALETTE OVERRIDES
   =============================================================================
   
   Modify or add your own to these to change the fundamental colors available 
   to the theme.
   
   ============================================================================= */

:root {
  /* --- Grayscale Palette --- */
  /* --palette-black: #0a0a0a; */
  /* --palette-gray-950: #0a0a0a; */
  /* --palette-gray-900: #171717; */
  /* --palette-gray-800: #262626; */
  /* --palette-gray-700: #404040; */
  /* --palette-gray-600: #525252; */
  /* --palette-gray-500: #737373; */
  /* --palette-gray-400: #a3a3a3; */
  /* --palette-gray-300: #d4d4d4; */
  /* --palette-gray-200: #e5e5e5; */
  /* --palette-gray-100: #f5f5f5; */
  /* --palette-gray-50: #fafafa; */
  /* --palette-white: #fafafa; */

  /* --- Accent Palette (unused by default) --- */
  /* Uncomment and customize these to add color to your theme */
  /* --palette-accent: #0d9488; */
  /* --palette-accent-light: #5eead4; */
  /* --palette-accent-dark: #115e59; */

  /* --- Semantic Colors --- */
  /* --palette-danger: #991b1b; */
  /* --palette-danger-light: #f87171; */
  /* --palette-warning: #b45309; */
  /* --palette-warning-light: #fcd34d; */
  /* --palette-success: #166534; */
  /* --palette-success-light: #86efac; */
}

/* =============================================================================
   LIGHT THEME
   ============================================================================= */

:root {
  /* --- Backgrounds --- */
  /* --color-background: var(--palette-gray-200); */
  /* --color-hover-bg: var(--palette-gray-300); */

  /* --- Text --- */
  /* --color-text-primary: var(--palette-gray-900); */
  /* --color-text-secondary: var(--palette-gray-700); */
  /* --color-text-strong: var(--palette-black); */

  /* --- Accents (links, buttons, interactive elements) --- */
  /* Default is monochrome black: */
  /* --color-accent-primary: var(--palette-black); */
  /* --color-accent-secondary: var(--palette-gray-500); */
  /* To use color accents: */
  /* --color-accent-primary: var(--palette-accent-dark); */
  /* --color-accent-secondary: var(--palette-accent); */

  /* --- Semantic Colors --- */
  /* --color-warning-primary: var(--palette-warning); */
  /* --color-warning-secondary: var(--palette-warning-light); */
  /* --color-danger-primary: var(--palette-danger); */
  /* --color-danger-secondary: var(--palette-danger-light); */
  /* --color-success-primary: var(--palette-success); */
  /* --color-success-secondary: var(--palette-success-light); */

  /* --- Borders --- */
  /* --color-border-light: var(--palette-gray-300); */
  /* --color-border-medium: var(--palette-gray-500); */

  /* --- Text Formatting --- */
  /* --color-code-bg: var(--palette-gray-700); */
  /* --color-blockquote-bg: var(--palette-gray-300); */
  /* --color-blockquote-border: var(--palette-gray-700); */
  /* --color-blockquote-text: var(--color-text-primary); */
  /* --color-separator-line: var(--palette-gray-500); */

  /* --- Inline Styles --- */
  /* --color-highlight: yellow; */
  /* --color-important: var(--color-danger-primary); */
  /* --color-quiet: var(--color-text-secondary); */

  /* --- Stat Bars --- */
  /* --stat-bar-track-bg: var(--palette-gray-300); */
  /* --stat-bar-fill-bg: var(--color-accent-primary); */

  /* --- Container --- */
  /* --container-bg-opacity: 98%; */
}

/* =============================================================================
   DARK THEME
   ============================================================================= */

html.dark body,
body.dark {
  /* --- Backgrounds --- */
  /* --color-background: var(--palette-gray-800); */
  /* --color-hover-bg: var(--palette-gray-700); */

  /* --- Text --- */
  /* --color-text-primary: var(--palette-gray-100); */
  /* --color-text-secondary: var(--palette-gray-300); */
  /* --color-text-strong: var(--palette-white); */

  /* --- Accents (links, buttons, interactive elements) --- */
  /* Default is monochrome white: */
  /* --color-accent-primary: var(--palette-white); */
  /* --color-accent-secondary: var(--palette-gray-500); */
  /* To use color accents: */
  /* --color-accent-primary: var(--palette-accent-light); */
  /* --color-accent-secondary: var(--palette-accent); */

  /* --- Semantic Colors --- */
  /* Note: light variants are primary in dark mode for contrast */
  /* --color-warning-primary: var(--palette-warning-light); */
  /* --color-warning-secondary: var(--palette-warning); */
  /* --color-danger-primary: var(--palette-danger-light); */
  /* --color-danger-secondary: var(--palette-danger); */
  /* --color-success-primary: var(--palette-success-light); */
  /* --color-success-secondary: var(--palette-success); */

  /* --- Borders --- */
  /* --color-border-light: var(--palette-gray-700); */
  /* --color-border-medium: var(--palette-gray-500); */

  /* --- Text Formatting --- */
  /* --color-code-bg: var(--palette-gray-300); */
  /* --color-blockquote-bg: var(--palette-gray-700); */
  /* --color-blockquote-border: var(--palette-gray-300); */
  /* --color-blockquote-text: var(--color-text-primary); */
  /* --color-separator-line: var(--palette-gray-500); */

  /* --- Inline Styles --- */
  /* --color-highlight: yellow; */
  /* --color-important: var(--color-danger-primary); */
  /* --color-quiet: var(--color-text-secondary); */

  /* --- Stat Bars --- */
  /* --stat-bar-track-bg: var(--palette-gray-700); */
  /* --stat-bar-fill-bg: var(--color-accent-primary); */
}

/* =============================================================================
   ADDING AN ACCENT COLOR
   =============================================================================
   
   The default theme is monochrome, but also set up to handle an accent color.
   To add a splash of color:
   
   1. Choose your accent color and define the palette:
   
      :root {
        --palette-accent: #0d9488;
        --palette-accent-light: #5eead4;
        --palette-accent-dark: #115e59;
      }
   
   2. Wire it up to the accent variables:
   
      :root {
        --color-accent-primary: var(--palette-accent-dark);
        --color-accent-secondary: var(--palette-accent);
      }
      
      html.dark body,
      body.dark {
        --color-accent-primary: var(--palette-accent-light);
        --color-accent-secondary: var(--palette-accent);
      }

   3. Check it out!
      Links, navigation, buttons will automatically light up with your color!
   
   ============================================================================= */

/* =============================================================================
   FONTS
   =============================================================================
   
   The template includes these fonts by default:
   - Merriweather (serif) - used for body text and headings
   - Inter (sans-serif) - available as an alternative
   - OpenDyslexic - for accessibility

   Users can switch fonts in Settings.
   
   To use a custom font:
   1. Import it (see example below)
   2. Set the appropriate variable
   
   ============================================================================= */

/* Example: Adding a custom Google Font */
/* @import url('https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400&display=swap'); */

:root {
  /* Font families */
  /* --font-serif: "Merriweather", Georgia, "Times New Roman", Times, serif; */
  /* --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; */
  /* --font-monospace: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace; */
  /* --font-dyslexic: "OpenDyslexic", Arial, sans-serif; */

  /* --font-heading: "Merriweather", Georgia, "Times New Roman", Times, serif; */

  /* Font weights */
  /* --font-weight-light: 300; */
  /* --font-weight-normal: 400; */
  /* --font-weight-bold: 700; */
}

/* =============================================================================
   FONT SIZES
   =============================================================================
   
   All sizes use 'pt' (points) for consistency.
   Users can also adjust text size in Settings.
   
   ============================================================================= */

:root {
  /* Base text size (paragraphs, choices) */
  /* --text-size-base: 13pt; */

  /* Small text */
  /* --text-size-small: 8pt; */
  /* --text-size-medium: 9pt; */
  /* --text-size-tiny: 11pt; */

  /* Large text */
  /* --text-size-large: 15pt; */
  /* --text-size-xl: 16pt; */
  /* --text-size-xxl: 18pt; */

  /* Title sizes */
  /* --text-size-title: 30pt; */
  /* --text-size-title-smaller: 20pt; */
  /* --text-size-subtitle: 14pt; */
}

/* =============================================================================
   LINE HEIGHTS
   ============================================================================= */

:root {
  /* --line-height-heading: 1.2em; */
  /* --line-height-text: 1.7em; */
  /* --line-height-choice: 1.7em; */
  /* --line-height-list: 1.6em; */
  /* --line-height-tight: 1; */
}

/* =============================================================================
   SPACING
   =============================================================================
   
   Used for margins, padding, and gaps throughout the template.
   
   ============================================================================= */

:root {
  /* --spacing-xs: 3px; */
  /* --spacing-sm: 6px; */
  /* --spacing-md: 8px; */
  /* --spacing-lg: 10px; */
  /* --spacing-xl: 12px; */
  /* --spacing-xxl: 15px; */
  /* --spacing-huge: 30px; */
  /* --spacing-massive: 60px; */
}

/* =============================================================================
   LAYOUT
   =============================================================================
   
   Control the overall page layout.
   
   ============================================================================= */

:root {
  /* Maximum width of the story content area */
  /* --content-max-width: 700px; */

  /* Navigation bar heights */
  /* --nav-height-desktop: 60px; */
  /* --nav-height-mobile: 80px; */

  /* Border radius for buttons, modals, etc. */
  /* --border-radius: 3px; */
  /* --border-radius-lg: 8px; */
}

/* =============================================================================
   ANIMATIONS & TRANSITIONS
   =============================================================================
   
   Control how fast things animate. Set to 0 to disable animations.
   Note: Users who prefer reduced motion (system setting) will automatically
   get minimal animations regardless of these values.
   
   ============================================================================= */

:root {
  /* --transition-fast: 0.1s; */
  /* --transition-medium: 0.2s; */
  /* --transition-slow: 0.6s; */
  /* --transition-very-slow: 2s; */
}

/* =============================================================================
   STAT BARS
   =============================================================================
   
   If your story uses stat bars (# STATBAR: variable), customize them here.
   (Tip: Customize the color in the color scheme section above)
   
   ============================================================================= */

:root {
  /* --stat-bar-height: 10px; */
  /* --stat-bar-border-radius: 5px; */
}

/* =============================================================================
   YOUR CUSTOM STYLES
   =============================================================================
   
   Add any additional CSS rules below. These can target specific elements,
   add new classes for use with the # CLASS: tag, or override anything else.
   
   Examples:
   
   Target the story container:
   #story { ... }
   
   Custom classes for text:
   Use with # CLASS: dramatic
   .dramatic {
     color: var(--color-important);
     font-weight: bold;
     text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
   }

   Use with # CLASS: whisper
   .whisper {
     color: var(--color-quiet);
     font-size: 0.85em;
     font-style: italic;
   }

   Use with # CLASS: glowing
   .glowing {
     color: var(--color-accent-primary, #0d9488);
     text-shadow: 0 0 10px currentColor;
   }

   Use with # CLASS: old-paper
   .old-paper {
     background: rgba(139, 119, 92, 0.15);
     padding: 0.8em 1em;
     border-left: 3px solid rgba(139, 119, 92, 0.5);
     font-style: italic;
   }
   
   Style all images:
   .story-image {
     border: 2px solid var(--color-accent-primary);
     border-radius: 8px;
   }
   
   ============================================================================= */