/* Valorile comune site-ului. styles.css le folosește prin var(--nume).
   Culorile de bază sunt sus; mai jos primesc roluri precum fundal, text sau contur. */

:root {
  /* Paleta de culori */
  --lapis-950: oklch(0.12 0.035 268);
  --lapis-900: oklch(0.16 0.05 266);
  --lapis-800: oklch(0.22 0.075 265);
  --lapis-600: oklch(0.36 0.12 263);
  --lapis-400: oklch(0.55 0.13 260);

  --gold-200: oklch(0.91 0.08 92);
  --gold-400: oklch(0.82 0.13 85);
  --gold-600: oklch(0.68 0.13 75);
  --gold-800: oklch(0.45 0.09 70);

  --carnelian-400: oklch(0.68 0.18 40);
  --carnelian-600: oklch(0.53 0.19 33);
  --carnelian-900: oklch(0.2 0.075 28);

  --faience-300: oklch(0.84 0.07 195);
  --faience-500: oklch(0.68 0.1 200);

  --limestone-50: oklch(0.965 0.018 88);
  --limestone-100: oklch(0.93 0.028 86);
  --limestone-300: oklch(0.84 0.04 82);

  --ink-900: oklch(0.21 0.03 265);
  --ink-600: oklch(0.4 0.04 265);
  --ink-500: oklch(0.49 0.035 265);

  --sand-100: oklch(0.94 0.022 88);
  --sand-300: oklch(0.8 0.03 85);
  --sand-500: oklch(0.66 0.035 82);

  /* Spațiere: aceleași valori sunt refolosite în toată pagina */
  --space-0: 0;
  --space-1: 0.125rem;
  --space-2: 0.25rem;
  --space-3: 0.375rem;
  --space-4: 0.5rem;
  --space-5: 0.75rem;
  --space-6: 1rem;
  --space-7: 1.5rem;
  --space-8: 2rem;
  --space-9: 3rem;
  --space-10: 4rem;
  --space-11: 6rem;
  --space-12: 8rem;
  --space-13: 12rem;

  /* Fonturi și dimensiuni de text */
  --font-family-display: 'Hepta Slab', Rockwell, 'Roboto Slab', Georgia, serif;
  --font-family-body:
    'Gentium Book Plus', 'Gentium Plus', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --font-family-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --font-family-glyph: 'Noto Sans Egyptian Hieroglyphs', 'Segoe UI Historic', sans-serif;

  --font-size-xs: 0.8125rem;
  --font-size-sm: 0.9375rem;
  --font-size-base: clamp(1.0625rem, 0.98rem + 0.35vw, 1.25rem);
  --font-size-md: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --font-size-lg: clamp(1.5rem, 1.25rem + 1.1vw, 2rem);
  --font-size-xl: clamp(1.875rem, 1.4rem + 2vw, 2.75rem);
  --font-size-2xl: clamp(2.25rem, 1.5rem + 3.2vw, 3.75rem);
  --font-size-3xl: clamp(2.75rem, 1.6rem + 5vw, 5rem);
  --font-size-4xl: clamp(3.25rem, 1.5rem + 7.5vw, 6rem);

  --font-weight-light: 250;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-tight: 1.08;
  --line-height-normal: 1.55;
  --line-height-relaxed: 1.7;

  --letter-spacing-tight: -0.02em;
  --letter-spacing-normal: 0;
  --letter-spacing-title: 0.06em;
  --letter-spacing-wide: 0.18em;

  /* Lățimi, margini și colțuri */
  --max-width-content: 40rem;
  --max-width-wide: 72rem;
  --max-width-page: 96rem;
  --gutter: clamp(1.25rem, 5vw, 4rem);

  --border-radius-sm: 2px;
  --border-radius-md: 4px;
  --border-radius-lg: 12px;
  --border-radius-full: 999px;

  /* Durata și ritmul tranzițiilor */
  --duration-instant: 50ms;
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;
  --duration-slower: 600ms;
  --duration-cinematic: 1200ms;

  --easing-default: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-in: cubic-bezier(0.4, 0, 1, 1);
  --easing-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Praguri de lățime orientative; regulile @media folosesc valorile direct */
  --breakpoint-sm: 375px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
}

/* Tema deschisă, folosită la finalul poveștii */
:root,
[data-theme='light'] {
  color-scheme: light;

  --color-bg-primary: var(--limestone-50);
  --color-bg-secondary: var(--limestone-100);
  --color-bg-tertiary: var(--limestone-300);
  --color-bg-inverse: var(--lapis-950);

  --color-text-primary: var(--ink-900);
  --color-text-secondary: var(--ink-600);
  --color-text-tertiary: var(--ink-500);
  --color-text-inverse: var(--sand-100);
  --color-text-link: var(--lapis-600);

  --color-border-primary: color-mix(in oklch, var(--ink-900) 30%, transparent);
  --color-border-secondary: color-mix(in oklch, var(--ink-900) 12%, transparent);
  --color-border-focus: var(--lapis-600);

  --color-accent-primary: var(--lapis-600);
  --color-accent-primary-hover: var(--lapis-800);
  --color-accent-primary-active: var(--lapis-900);
  --color-accent-secondary: var(--carnelian-600);

  --color-status-success: var(--faience-500);
  --color-status-warning: var(--gold-600);
  --color-status-error: var(--carnelian-600);
  --color-status-info: var(--lapis-400);

  --color-surface-overlay: oklch(0.965 0.018 88 / 0.8);

  --shadow-sm: 0 1px 2px oklch(0.21 0.03 265 / 0.1);
  --shadow-md: 0 8px 24px -8px oklch(0.21 0.03 265 / 0.18);
  --shadow-lg: 0 24px 64px -16px oklch(0.21 0.03 265 / 0.25);
  --shadow-focus: 0 0 0 3px color-mix(in oklch, var(--lapis-600) 40%, transparent);
}

/* Tema întunecată, folosită pe durata nopții */
[data-theme='dark'] {
  color-scheme: dark;

  --color-bg-primary: var(--lapis-950);
  --color-bg-secondary: var(--lapis-900);
  --color-bg-tertiary: var(--lapis-800);
  --color-bg-inverse: var(--limestone-50);

  --color-text-primary: var(--sand-100);
  --color-text-secondary: var(--sand-300);
  --color-text-tertiary: var(--sand-500);
  --color-text-inverse: var(--ink-900);
  --color-text-link: var(--gold-400);

  --color-border-primary: color-mix(in oklch, var(--gold-400) 38%, transparent);
  --color-border-secondary: color-mix(in oklch, var(--sand-100) 14%, transparent);
  --color-border-focus: var(--gold-400);

  --color-accent-primary: var(--gold-400);
  --color-accent-primary-hover: var(--gold-200);
  --color-accent-primary-active: var(--gold-600);
  --color-accent-secondary: var(--carnelian-400);

  --color-status-success: var(--faience-300);
  --color-status-warning: var(--gold-400);
  --color-status-error: var(--carnelian-400);
  --color-status-info: var(--lapis-400);

  --color-surface-overlay: oklch(0.12 0.035 268 / 0.78);

  --shadow-sm: 0 1px 2px oklch(0.05 0.02 268 / 0.5);
  --shadow-md: 0 12px 32px -8px oklch(0.05 0.02 268 / 0.65);
  --shadow-lg: 0 32px 80px -16px oklch(0.05 0.02 268 / 0.8);
  --shadow-focus: 0 0 0 3px color-mix(in oklch, var(--gold-400) 45%, transparent);
}

/* Dacă nu alegem explicit tema deschisă, ținem cont și de setarea sistemului. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --color-bg-primary: var(--lapis-950);
    --color-bg-secondary: var(--lapis-900);
    --color-bg-tertiary: var(--lapis-800);
    --color-bg-inverse: var(--limestone-50);
    --color-text-primary: var(--sand-100);
    --color-text-secondary: var(--sand-300);
    --color-text-tertiary: var(--sand-500);
    --color-text-inverse: var(--ink-900);
    --color-text-link: var(--gold-400);
    --color-border-primary: color-mix(in oklch, var(--gold-400) 38%, transparent);
    --color-border-secondary: color-mix(in oklch, var(--sand-100) 14%, transparent);
    --color-border-focus: var(--gold-400);
    --color-accent-primary: var(--gold-400);
    --color-accent-primary-hover: var(--gold-200);
    --color-accent-primary-active: var(--gold-600);
    --color-accent-secondary: var(--carnelian-400);
  }
}