/* style.css — StripNews.cz Design System */

/* ============================================
   GOOGLE FONTS
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');

/* ============================================
   TYPE SCALE (fluid clamp)
   ============================================ */
:root {
  --text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.8rem  + 0.35vw, 1rem);
  --text-base: clamp(1rem,     0.9rem  + 0.5vw,  1.125rem);
  --text-lg:   clamp(1.125rem, 0.95rem + 0.85vw, 1.5rem);
  --text-xl:   clamp(1.5rem,   1rem    + 1.5vw,  2.25rem);
  --text-2xl:  clamp(2rem,     1.2rem  + 2.5vw,  3.5rem);
  --text-3xl:  clamp(2.5rem,   1rem    + 4vw,    5rem);
  --text-hero: clamp(3rem,     0.5rem  + 7vw,    8rem);

  /* ============================================
     FONT FAMILIES
     ============================================ */
  --font-display: 'Lora', 'Georgia', serif;
  --font-body: 'DM Sans', 'Helvetica Neue', sans-serif;

  /* ============================================
     4px SPACING SYSTEM
     ============================================ */
  --space-1:  0.25rem;  /*  4px */
  --space-2:  0.5rem;   /*  8px */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-5:  1.25rem;  /* 20px */
  --space-6:  1.5rem;   /* 24px */
  --space-8:  2rem;     /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */
  --space-32: 8rem;     /* 128px */

  /* ============================================
     RADIUS
     ============================================ */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;

  /* ============================================
     TRANSITIONS
     ============================================ */
  --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);
  --ease-golden: cubic-bezier(0.16, 1, 0.3, 1);

  /* ============================================
     CONTENT WIDTHS
     ============================================ */
  --content-narrow: 640px;
  --content-default: 960px;
  --content-wide: 1200px;
  --content-full: 100%;

  /* ============================================
     CATEGORY COLORS
     ============================================ */
  --cat-cesko:       #4B6A9B;
  --cat-zahranici:   #2D8B7A;
  --cat-sport:       #3D7B4F;
  --cat-celebrity:   #8B4572;
  --cat-ekonomika:   #A07520;
  --cat-technologie: #4178B5;
  --cat-kultura:     #B5674A;
}

/* ============================================
   LIGHT MODE — StripNews Custom Palette
   ============================================ */
:root, [data-theme="light"] {
  /* --- Surfaces (Warm Cream / Newspaper-like) --- */
  --color-bg:             #F8F5EE;
  --color-surface:        #FFFFFF;
  --color-surface-2:      #FDFCF9;
  --color-surface-offset: #F0EDE5;
  --color-surface-offset-2: #E8E5DD;
  --color-surface-dynamic: #DDD9D0;
  --color-divider:        #D4D0C7;
  --color-border:         oklch(from #1E2A3A l c h / 0.12);

  /* --- Text (Navy-based) --- */
  --color-text:           #1E2A3A;
  --color-text-muted:     #6B7280;
  --color-text-faint:     #A0A5AD;
  --color-text-inverse:   #F8F5EE;

  /* --- Primary Accent (Gold) --- */
  --color-primary:        #E8A800;
  --color-primary-hover:  #D09600;
  --color-primary-active: #B88400;
  --color-primary-highlight: #FDF5E0;

  /* --- Action / CTA (Red) --- */
  --color-action:         #C42D2D;
  --color-action-hover:   #A82424;
  --color-action-active:  #8E1C1C;
  --color-action-highlight: #FDE8E8;

  /* --- Semantic aliases --- */
  --color-error:          #C42D2D;
  --color-success:        #3D7B4F;
  --color-warning:        #A07520;

  /* --- Shadows (warm-tinted) --- */
  --shadow-sm: 0 1px 2px oklch(0.2 0.02 70 / 0.06);
  --shadow-md: 0 4px 12px oklch(0.2 0.02 70 / 0.08);
  --shadow-lg: 0 12px 32px oklch(0.2 0.02 70 / 0.12);

  /* --- Comic Panel --- */
  --panel-border: #1E2A3A;
  --panel-bg: #FDFCF5;
  --halftone-opacity: 0.04;
}

/* ============================================
   DARK MODE
   ============================================ */
[data-theme="dark"] {
  /* --- Surfaces (Dark Navy-Tinted) --- */
  --color-bg:             #161820;
  --color-surface:        #1C1F2A;
  --color-surface-2:      #22263A;
  --color-surface-offset: #1E2130;
  --color-surface-offset-2: #262A3E;
  --color-surface-dynamic: #303548;
  --color-divider:        #2A2E40;
  --color-border:         oklch(from #E0DED8 l c h / 0.12);

  /* --- Text --- */
  --color-text:           #E0DED8;
  --color-text-muted:     #8B8E98;
  --color-text-faint:     #555868;
  --color-text-inverse:   #161820;

  /* --- Primary Accent (Brighter Gold) --- */
  --color-primary:        #F0B820;
  --color-primary-hover:  #E8A800;
  --color-primary-active: #D09600;
  --color-primary-highlight: #2E2A1E;

  /* --- Action / CTA (Brighter Red) --- */
  --color-action:         #E04545;
  --color-action-hover:   #C42D2D;
  --color-action-active:  #A82424;
  --color-action-highlight: #2E1E1E;

  /* --- Semantic --- */
  --color-error:          #E04545;
  --color-success:        #5BA06D;
  --color-warning:        #D4A030;

  /* --- Shadows --- */
  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.2);
  --shadow-md: 0 4px 12px oklch(0 0 0 / 0.3);
  --shadow-lg: 0 12px 32px oklch(0 0 0 / 0.4);

  /* --- Comic Panel --- */
  --panel-border: #8B8E98;
  --panel-bg: #1C1F2A;
  --halftone-opacity: 0.06;
}

/* System preference fallback */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg:             #161820;
    --color-surface:        #1C1F2A;
    --color-surface-2:      #22263A;
    --color-surface-offset: #1E2130;
    --color-surface-offset-2: #262A3E;
    --color-surface-dynamic: #303548;
    --color-divider:        #2A2E40;
    --color-border:         oklch(from #E0DED8 l c h / 0.12);
    --color-text:           #E0DED8;
    --color-text-muted:     #8B8E98;
    --color-text-faint:     #555868;
    --color-text-inverse:   #161820;
    --color-primary:        #F0B820;
    --color-primary-hover:  #E8A800;
    --color-primary-active: #D09600;
    --color-primary-highlight: #2E2A1E;
    --color-action:         #E04545;
    --color-action-hover:   #C42D2D;
    --color-action-active:  #A82424;
    --color-action-highlight: #2E1E1E;
    --color-error:          #E04545;
    --color-success:        #5BA06D;
    --color-warning:        #D4A030;
    --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.2);
    --shadow-md: 0 4px 12px oklch(0 0 0 / 0.3);
    --shadow-lg: 0 12px 32px oklch(0 0 0 / 0.4);
    --panel-border: #8B8E98;
    --panel-bg: #1C1F2A;
    --halftone-opacity: 0.06;
  }
}

/* ============================================
   HALFTONE DOT PATTERN (comic-style)
   ============================================ */
.halftone-bg {
  background-image: radial-gradient(circle, var(--color-text) 1px, transparent 1px);
  background-size: 8px 8px;
  opacity: var(--halftone-opacity);
  pointer-events: none;
  position: absolute;
  inset: 0;
}


@keyframes reveal-fade {
  to { opacity: 1; }
}