/* ============================================================
   Newsly — Design Tokens
   Mirrored 1:1 from newsly_flutter/lib/core/theme/design_tokens.dart
   "Swiss Modernism: monochrome ink on warm paper, ONE accent
    (Crimson #B91C1C), hairline dividers, sparing radii, near-flat surfaces."
   Do not introduce a second accent. Do not add blur/soft shadows.
   ============================================================ */

:root {
  /* ── The ONE accent ── */
  --c-primary:          #B91C1C;
  --c-primary-hover:    #991B1B;
  --c-primary-pressed:  #7F1D1D;
  --c-primary-soft:     #FEE2E2;
  --c-primary-on:       #FAFAFA;

  /* ── Status ── */
  --c-success: #166534;
  --c-warning: #854D0E;
  --c-error:   #991B1B;

  /* ── Light (default: warm paper) ── */
  --c-bg:            #FAFAFA;
  --c-surface:       #FFFFFF;
  --c-surface-2:     #FFFFFF;
  --c-border:        #E4E4E7; /* hairline */
  --c-border-strong: #09090B; /* strong section rules */
  --c-text:          #09090B; /* ink */
  --c-text-2:        #52525B; /* metadata */
  --c-text-muted:    #71717A; /* captions */

  /* ── Type ── */
  --f-sans:  'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;

  --fs-xxs: 0.625rem; /* 10 */
  --fs-xs:  0.75rem;  /* 12 */
  --fs-sm:  0.875rem; /* 14 */
  --fs-md:  1rem;     /* 16 */
  --fs-lg:  1.125rem; /* 18 */
  --fs-xl:  1.375rem; /* 22 */
  --fs-2xl: 1.75rem;  /* 28 */

  /* Editorial display scale — fluid, brutal */
  --fs-d1: clamp(3rem, 11vw, 9.5rem);
  --fs-d2: clamp(2.25rem, 6.5vw, 5rem);
  --fs-d3: clamp(1.75rem, 3.6vw, 2.75rem);

  --lh-tight: 1.05;
  --lh-snug:  1.25;
  --lh-body:  1.7;

  --tr-tight: -0.02em;  /* serif display */
  --tr-normal: 0;
  --tr-wide:  0.14em;   /* uppercase eyebrow / labels */

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;
  --fw-black:   900;

  /* ── Radii — square by design ── */
  --r-xs:   0px;
  --r-sm:   2px;
  --r-md:   4px;
  --r-lg:   4px;
  --r-xl:   8px;
  --r-full: 9999px; /* pills only */

  /* ── Spacing ── */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 144px;

  --page-x: clamp(20px, 5vw, 72px);
  --maxw: 1400px;

  /* ── Rules (crisp 1px, never a blur) ── */
  --rule:        1px solid var(--c-border);
  --rule-strong: 1px solid var(--c-border-strong);

  /* ── Motion ── */
  --e-out: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 160ms;
  --t-base: 320ms;
  --t-slow: 700ms;
}

/* ── Dark ── */
:root[data-theme='dark'] {
  --c-bg:            #09090B;
  --c-surface:       #09090B;
  --c-surface-2:     #18181B;
  --c-border:        #27272A;
  --c-border-strong: #FAFAFA;
  --c-text:          #FAFAFA;
  --c-text-2:        #A1A1AA;
  --c-text-muted:    #71717A;
  --c-primary-soft:  #2A1315;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --c-bg:            #09090B;
    --c-surface:       #09090B;
    --c-surface-2:     #18181B;
    --c-border:        #27272A;
    --c-border-strong: #FAFAFA;
    --c-text:          #FAFAFA;
    --c-text-2:        #A1A1AA;
    --c-text-muted:    #71717A;
    --c-primary-soft:  #2A1315;
  }
}