/* =====================================================================
   СРЕДА · Design tokens
   Antipa-level calm. Orthodox depth. Zero kitsch.
   ===================================================================== */

/* Webfonts — match the codebase (Expo @expo-google-fonts/*).
   Display: Cormorant Garamond (literary serif, used at large sizes
            and as italic for prayer titles + quotes).
   Body:    Lora (warm reading serif, prayer text + body copy).
   UI:      Inter (clean neutral sans, navigation + UI labels).
   Mono:    JetBrains Mono (uppercase tracked labels, eyebrows). */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Lora:ital,wght@0,400;0,500;1,400&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* -------------------------------------------------------------------
     COLOR — light theme (Linen White world)
     ------------------------------------------------------------------- */

  /* Surfaces */
  --sreda-fon:                     #FDFCFA; /* Linen / page background */
  --sreda-poverkhnost:             #F8F5F0; /* Warm card surface */
  --sreda-poverkhnost-muted:       #EDE6DA; /* Selected chip / accent surface */
  --sreda-granitsa:                #E0D8C8; /* Soft sand divider / card border */

  /* Text */
  --sreda-text:                    #2C2926; /* Graphite — primary text */
  --sreda-text-secondary:          #5A544E; /* Walnut grey — supporting text */
  --sreda-text-muted:              #7A7470; /* Stone — captions, eyebrows */
  --sreda-text-on-dark:            #FDFCFA; /* Text on graphite buttons */

  /* Accent system */
  --sreda-kinovar:                 #D8452E; /* Cinnabar — the single red.
                                              Used ONLY at small scale:
                                              the «Р» in the logo, the small
                                              cross, a feast dot, a focal
                                              underline. Never as a fill. */
  --sreda-ohra:                    #C8A96E; /* Muted amber — beeswax gold,
                                              used for selected chip stroke,
                                              ai-label, the assistant ring. */
  --sreda-ohra-muted:              #DFCCA0; /* Lighter amber wash */
  --sreda-ssylka:                  #8B7548; /* Link / underlined-action */

  /* Semantic */
  --sreda-success:                 #6B7F4F; /* Soft sage */
  --sreda-warning:                 #8B7548; /* Same as ssylka — fast / warning */
  --sreda-danger:                  #B53A24; /* Muted terracotta — destructive */

  /* -------------------------------------------------------------------
     TYPOGRAPHY — family tokens
     ------------------------------------------------------------------- */
  --sreda-font-display:  'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --sreda-font-text:     'Lora', 'Spectral', Georgia, serif;
  --sreda-font-ui:       'Inter', 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --sreda-font-mono:     'JetBrains Mono', 'IBM Plex Mono', ui-monospace, Menlo, monospace;

  /* -------------------------------------------------------------------
     SPACING — base unit 4px (matches src/theme/tokens.ts → spacing.*)
     ------------------------------------------------------------------- */
  --sreda-space-xxs:   4px;
  --sreda-space-xs:    8px;
  --sreda-space-s:    12px;
  --sreda-space-m:    16px;
  --sreda-space-l:    24px;
  --sreda-space-xl:   32px;
  --sreda-space-xxl:  48px;
  --sreda-space-xxxl: 64px;
  --sreda-screen-pad: 20px; /* horizontal screen padding */

  /* -------------------------------------------------------------------
     RADII — small. Cards live in books, not in capsules.
     ------------------------------------------------------------------- */
  --sreda-radius-none:    0;
  --sreda-radius-small:   2px;
  --sreda-radius-button:  4px;   /* primary CTAs are nearly square */
  --sreda-radius-card:    8px;   /* list card */
  --sreda-radius-modal:  12px;   /* hero / prayer / feast cards */
  --sreda-radius-soft:   14px;   /* core prayer card, suggestion card */
  --sreda-radius-pill:  999px;   /* chips, mini-player button only */

  /* -------------------------------------------------------------------
     ELEVATION — barely lifted from the surface.
     The product never casts a hard shadow.
     ------------------------------------------------------------------- */
  --sreda-shadow-none:   none;
  --sreda-shadow-card:   0 1px 2px rgba(44, 41, 38, 0.04);
  --sreda-shadow-lift:   0 2px 8px rgba(44, 41, 38, 0.06);
  --sreda-shadow-modal:  0 8px 20px rgba(44, 41, 38, 0.08);

  /* -------------------------------------------------------------------
     MOTION — slow, ease-out, page-turning, never bouncy.
     ------------------------------------------------------------------- */
  --sreda-motion-quick:  180ms ease-out;
  --sreda-motion-base:   320ms ease-out;
  --sreda-motion-slow:   480ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* DARK theme — candlelight, not OLED black */
:root[data-theme="dark"],
.sreda-dark {
  --sreda-fon:                #1A1714;
  --sreda-poverkhnost:        #242019;
  --sreda-poverkhnost-muted:  #2E2823;
  --sreda-granitsa:           #38322B;

  --sreda-text:               #F0E8D8;
  --sreda-text-secondary:     #B8AFA2;
  --sreda-text-muted:         #8A8276;
  --sreda-text-on-dark:       #1A1714;

  --sreda-kinovar:            #D8452E;
  --sreda-ohra:               #C8A96E;
  --sreda-ohra-muted:         #8B7548;
  --sreda-ssylka:             #C8A96E;

  --sreda-success:            #8FA070;
  --sreda-warning:            #8B7548;
  --sreda-danger:             #D8452E;
}

/* =====================================================================
   Semantic type rules.
   Apply via class (`.sreda-h1`, `.sreda-prayer-body`, …) OR through
   element selectors — see the bottom of the file for opt-in mapping.
   ===================================================================== */

.sreda-eyebrow,
.sreda-label {
  font-family: var(--sreda-font-mono);
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sreda-text-muted);
  font-weight: 500;
}

.sreda-display,
.sreda-h-display {
  font-family: var(--sreda-font-display);
  font-weight: 500;
  font-size: 36px;
  line-height: 1.06;
  letter-spacing: -0.005em;
  color: var(--sreda-text);
}

.sreda-h1 {
  font-family: var(--sreda-font-display);
  font-weight: 500;
  font-size: 32px;
  line-height: 38px;
  color: var(--sreda-text);
}

.sreda-h2 {
  font-family: var(--sreda-font-display);
  font-weight: 500;
  font-size: 24px;
  line-height: 30px;
  color: var(--sreda-text);
}

.sreda-h3 {
  font-family: var(--sreda-font-ui);
  font-weight: 500;
  font-size: 18px;
  line-height: 24px;
  color: var(--sreda-text);
  letter-spacing: 0;
}

.sreda-body-large {
  font-family: var(--sreda-font-text);
  font-size: 17px;
  line-height: 28px;
  color: var(--sreda-text);
}

.sreda-body {
  font-family: var(--sreda-font-text);
  font-size: 16px;
  line-height: 26px;
  color: var(--sreda-text);
}

.sreda-small {
  font-family: var(--sreda-font-ui);
  font-size: 14px;
  line-height: 20px;
  color: var(--sreda-text);
}

.sreda-caption {
  font-family: var(--sreda-font-ui);
  font-size: 12px;
  line-height: 16px;
  color: var(--sreda-text-muted);
}

.sreda-prayer-title {
  font-family: var(--sreda-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 28px;
  line-height: 34px;
  color: var(--sreda-text);
}

.sreda-prayer-body {
  font-family: var(--sreda-font-text);
  font-size: 19px;
  line-height: 34px;
  color: var(--sreda-text);
  text-wrap: pretty;
}

.sreda-quote {
  font-family: var(--sreda-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  line-height: 32px;
  color: var(--sreda-text);
}

/* Tone modifiers — apply with .sreda-tone-secondary etc. */
.sreda-tone-secondary { color: var(--sreda-text-secondary); }
.sreda-tone-muted     { color: var(--sreda-text-muted); }
.sreda-tone-accent    { color: var(--sreda-kinovar); }
.sreda-tone-link      { color: var(--sreda-ssylka); }

/* Selection — warm amber wash, never bright blue. */
::selection {
  background: var(--sreda-ohra-muted);
  color: var(--sreda-text);
}