/* ============================================================
   CSS Custom Properties — Talking Leaves Fiction
   NEVER hardcode hex/rgb/hsl values outside this file.
   ============================================================ */

/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400..700;1,400..700&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

/* ─── Named brand palette ────────────────────────────────────────────────────
   Static values — never change between themes. Use directly for brand
   colours; reference in the theme tokens below for anything that swaps
   in dark mode.
   ──────────────────────────────────────────────────────────────────────── */
:root {
	/* Brand Primary */
	--color-charcoal:  #32302F;
	--color-juniper:   #3E4F49;
	--color-moss:      #BB997F;
	--color-mulberry:  #71475E;
	--color-gold:      #AF905A;
	--color-sand:      #EFE9E0;
	--color-cream:     #FAF7F2;

	/* Neutrals */
	--color-black:     #000000;
	--color-greystone: #EDECEB;
	--color-white:     #FFFFFF;

	/* Error */
	--color-error:     #A52222;
	--color-error-alt: #F36A68;
}

/* ─── Light theme tokens ─────────────────────────────────────────────────────
   Only define here what genuinely needs to swap in dark mode.
   ──────────────────────────────────────────────────────────────────────── */
[data-theme="light"],
:root {
	--color-bg:             #fff;
	--color-bg-secondary:   var(--color-sand);
	--color-bg-tertiary:    var(--color-cream);
	--color-surface:        var(--color-white);

	--color-text:           var(--color-charcoal);
	--color-text-secondary: #5a5a5a;
	--color-text-muted:     #8a8a8a;

	--color-border:         var(--color-greystone);
	--color-border-strong:  #b0a89e;

	--color-focus-ring:     var(--color-juniper);

	/* Header */
	--header-bg:            var(--color-white);
	--header-border:        var(--color-greystone);
	--header-text:          var(--color-charcoal);
	--header-link-hover:    var(--color-mulberry);
	--header-height:        80px;

	/* Footer */
	--footer-bg:            var(--color-charcoal);
	--footer-text:          var(--color-greystone);
	--footer-link:          var(--color-greystone);
	--footer-link-hover:    var(--color-white);
	--footer-border:        #333333;

	/* Shadows */
	--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
	--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.10);
	--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);

	--btn:var(--color-charcoal);
	--btn-hover: var(--color-juniper);
	--clear-btn: #fff;
	--clear-btn-hover: var(--color-cream);
}

/* ─── Dark theme tokens ──────────────────────────────────────────────────── */
[data-theme="dark"] {
	--color-bg:             #121212;
	--color-bg-secondary:   #1e1e1e;
	--color-bg-tertiary:    var(--color-charcoal);
	--color-surface:        #1e1e1e;

	--color-text:           #e0e0e0;
	--color-text-secondary: #b0b0b0;
	--color-text-muted:     #7a7a7a;

	--color-border:         #333333;
	--color-border-strong:  #555555;

	--color-focus-ring:     var(--color-sand);

	/* Header */
	--header-bg:            #1a1a1a;
	--header-border:        #333333;
	--header-text:          #e0e0e0;
	--header-link-hover:    var(--color-sand);

	/* Footer */
	--footer-bg:            #0a0a0a;
	--footer-text:          #b0b0b0;
	--footer-link:          #b0b0b0;
	--footer-link-hover:    #e0e0e0;
	--footer-border:        #222222;

	/* Shadows */
	--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
	--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
	--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);

	--btn:var(--color-cream);
	--btn-hover: var(--color-sand);
	--clear-btn:var(--color-charcoal);
	--clear-btn-hover: #4f4c4b;
}

/* ─── Design tokens (theme-independent) ─────────────────────────────────── */
:root {
	/* Typography */
	--font-heading: "Libre Baskerville", serif;
	--font-body:    "Montserrat", sans-serif;

	/* Heading sizes — desktop */
	--h1-size: 3.75rem;  /* 60px */
	--h2-size: 2.25rem;  /* 36px */
	--h3-size: 1.75rem;  /* 28px */
	--h4-size: 1.5rem;   /* 24px */
	--h5-size: 1.125rem; /* 18px */
	--h6-size: 1rem;     /* 16px */

	/* Heading line heights — desktop */
	--h1-lh: 1.333; /* 80/60 */
	--h2-lh: 1.389; /* 50/36 */
	--h3-lh: 1.429; /* 40/28 */
	--h4-lh: 1.333; /* 32/24 */
	--h5-lh: 1.333; /* 24/18 */
	--h6-lh: 1.5;   /* 24/16 */

	/* Heading sizes — mobile */
	--h1-size-mobile: 2rem;     /* 32px */
	--h2-size-mobile: 1.625rem; /* 26px */
	--h3-size-mobile: 1.375rem; /* 22px */
	--h4-size-mobile: 1rem;     /* 16px */
	--h5-size-mobile: 0.875rem; /* 14px */
	--h6-size-mobile: 0.75rem;  /* 12px */

	/* Heading line heights — mobile */
	--h1-lh-mobile: 1.4375; /* 46/32 */
	--h2-lh-mobile: 1.385;  /* 36/26 */
	--h3-lh-mobile: 1.545;  /* 34/22 */
	--h4-lh-mobile: 1.5;    /* 24/16 */
	--h5-lh-mobile: 1.429;  /* 20/14 */
	--h6-lh-mobile: 1.5;    /* 18/12 */

	/* Body type scale */
	--text-xs:   0.75rem;   /* 12px */
	--text-sm:   0.875rem;  /* 14px */
	--text-base: 1rem;      /* 16px */
	--text-md:   1.125rem;  /* 18px */
	--text-lg:   1.25rem;   /* 20px */
	--text-xl:   1.5rem;    /* 24px */
	--text-2xl:  1.875rem;  /* 30px */
	--text-3xl:  2.25rem;   /* 36px */
	--text-4xl:  3rem;      /* 48px */

	--line-height-tight:   1.25;
	--line-height-snug:    1.375;
	--line-height-normal:  1.5;
	--line-height-relaxed: 1.7;

	/* Spacing */
	--space-1:  0.25rem;
	--space-2:  0.5rem;
	--space-3:  0.75rem;
	--space-4:  1rem;
	--space-5:  1.25rem;
	--space-6:  1.5rem;
	--space-8:  2rem;
	--space-10: 2.5rem;
	--space-12: 3rem;
	--space-16: 4rem;
	--space-20: 5rem;
	--space-24: 6rem;

	/* Layout — container max-widths */
	--container-padding: var(--space-6);
	--container-sm:      calc(542px + var(--container-padding) * 2);
	--container-md:      calc(700px + var(--container-padding) * 2);
	--container-lg:      calc(964px + var(--container-padding) * 2);
	--container-xl:      calc(1224px + var(--container-padding) * 2);
	--container-xxl:     calc(1560px + var(--container-padding) * 2);

	/* Border radius */
	--radius-sm:   4px;
	--radius-md:   8px;
	--radius-lg:   12px;
	--radius-xl:   30px;
	--radius-full: 9999px;

	/* Transitions */
	--transition-fast: 150ms ease;
	--transition-base: 250ms ease;
	--transition-slow: 400ms ease;

	/* Z-index scale */
	--z-below:    -1;
	--z-base:      0;
	--z-raised:   10;
	--z-dropdown: 100;
	--z-sticky:   200;
	--z-overlay:  300;
	--z-modal:    400;
	--z-toast:    500;
}