/* Default light theme variables */
:root {
    --paper-white: #fcfcfc;
  --paper-cream: #f7f5f2;
  --ink-dark: #1a1a1a;
  --ink-medium: #2d2d2d;
  --ink-light: #4a4a4a;
  --accent-warm: #00ced1;
  --badge-styles: rgb(0, 0, 0);
  --accent-glow: rgba(0, 206, 209, 0.3);
  --backdrop-filter: blur(33px);
  --shadow-pop: 0 8px 32px rgba(0, 0, 0, 0.1);
  --paper-texture: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23noise)' opacity='0.08'/%3E%3C/svg%3E");
  --nav-shadow:#f0eded;
  --paper-texture: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23noise)' opacity='0.08'/%3E%3C/svg%3E");
  --paper-border: rgba(0, 0, 0, 0.05);
  --paper-shadow: rgba(0, 0, 0, 0.1);
  --paper-border: rgba(0, 0, 0, 0.05);
  --video-bg : none;
  --image-bg : none;
  --background:  linear-gradient(15deg, 
  transparent 70%, 
  var(--paper-shadow) 98%),
linear-gradient(-15deg, 
  transparent 70%, 
  var(--paper-shadow) 98%),
var(--paper-white);
box-shadow: 
inset 0 0 40px var(--paper-border);
--card-bg : rgba(255, 255, 255, 0.6);
--nav-bg:#fcfcfcbd;
--hero-bg : rgba(255, 255, 255, 0.753);

--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  /* UI Effects */
  --backdrop-filter: blur(12px);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-elevation: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  
  --hero-shadow : none;
 --box-shadow:none;

}


[data-theme="dark"] {
    /* Deep, rich backgrounds that create a sense of depth */
    --paper-white: #000000;   /* Main background for panels and surfaces */
    --paper-cream: #000000;    /* Slightly lighter background for contrast */
    --video-bg : block;
    --hero-bg : rgba(0, 0, 0, 0.753);
    /* Warm, classic ink tones for typography */
    --ink-dark:   #ffffff;     /* Primary text with a warm golden hue */
    --ink-medium: #ffffff;     /* Secondary text for supportive content */
    --ink-light:  #999999;     /* Tertiary text or less emphasized details */
  --badge-styles: rgba(43, 226, 202, 0.15);
  --card-bg : rgba(20, 20, 20, 0.6)
  ;

    /* Accent colors that pop without clashing */
    --accent-warm: #00ced1;    /* Vibrant, inviting accent (tomato) */
    --accent-glow:rgba(0, 206, 209, 0.25); /* Soft glow effect for hover states */
  --image-bg : block;
    /* Navigation shadow for subtle depth */
    --nav-shadow: #222222;     /* Darker shadow to enhance layering */
    --background: 
    linear-gradient(90deg, #1a1a1a 1px, transparent 1px),
    linear-gradient(#1a1a1a 1px, transparent 1px);
  --background-color: #141414;
  --background-size: 40px 40px;
--color: white;
--backdrop-filter: none;
--nav-bg:  black;
--hero-shadow : 0 2px 4px rgba(0, 0, 0, 0.3);
--box-shadow: 0 4px 12px rgba(43, 226, 202, 0.2);

}
  
:root {
  /* Font Families */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  --font-secondary: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  
    --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-display: 'Plus Jakarta Sans', var(--font-sans);
    --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}


::selection {
  background-color: var(--accent-warm);
}