/*
 * Notely design tokens.
 *
 * One design, two value sets: every color token carries its light value
 * (Soft Stationery) and dark value (Calm Night) in a single light-dark() pair.
 * The active scheme comes from the element's `color-scheme`, which follows the
 * system by default and is pinned by [data-theme="light" | "dark"].
 *
 * Components must reference these tokens only. Never branch a component on the
 * theme and never hard-code a color outside this file.
 */

:root {
  color-scheme: light dark;

  /* Surfaces */
  --color-bg: light-dark(#FBF3EE, #1C1A20);
  --color-bg-band: light-dark(#F6EAE2, #211E26);
  --color-surface: light-dark(#FFFFFF, #25222A);
  --color-surface-raised: light-dark(#FFFFFF, #2D2934);
  --color-frame: light-dark(#FFFFFF, #2D2934);
  --color-border: light-dark(#EFE2DA, rgb(242 238 244 / 0.10));
  --color-divider: light-dark(rgb(40 41 40 / 0.10), rgb(242 238 244 / 0.10));

  /* Text */
  --color-text: light-dark(#282928, #F2EEF4);
  --color-text-muted: light-dark(#4C4D4C, #BBB4C0);
  --color-text-subtle: light-dark(#6E6A68, #9C95A2);

  /* Brand accent: script labels, marker, links, focus */
  --color-accent: light-dark(#A3468A, #B39DEB);
  --color-marker: light-dark(#F9CFDD, rgb(179 157 235 / 0.34));
  --color-focus: light-dark(#A3468A, #D8EE8A);

  /* Actions */
  --color-cta-bg: light-dark(#282928, #D8EE8A);
  --color-cta-bg-hover: light-dark(#000000, #E6F7AE);
  --color-cta-fg: light-dark(#FFFFFF, #1C1A20);
  --color-secondary-bg: light-dark(#FFFFFF, rgb(242 238 244 / 0.04));
  --color-secondary-bg-hover: light-dark(#F6EAE2, rgb(242 238 244 / 0.10));
  --color-secondary-border: light-dark(#282928, rgb(242 238 244 / 0.28));

  /* Stationery tiles: icon backgrounds and tinted panels */
  --color-tile-pink: light-dark(#F9CFDD, #422F40);
  --color-tile-butter: light-dark(#FCEA95, #3E3824);
  --color-tile-sage: light-dark(#C7E7D2, #263A30);
  --color-tile-lilac: light-dark(#D7D1E8, #342C47);
  --color-tile-sky: light-dark(#D6E3F5, #2D394E);
  --color-on-tile: light-dark(#282928, #F2EEF4);

  /* Washi tape */
  --color-tape-pink: light-dark(rgb(247 187 196 / 0.92), rgb(247 187 196 / 0.55));
  --color-tape-butter: light-dark(rgb(252 234 149 / 0.92), rgb(252 234 149 / 0.50));
  --color-tape-sage: light-dark(rgb(199 231 210 / 0.95), rgb(199 231 210 / 0.50));
  --color-tape-lilac: light-dark(rgb(215 209 232 / 0.95), rgb(215 209 232 / 0.50));

  /* Decoration */
  --color-heart: light-dark(#F4B1C7, #E58FB3);
  --color-spark: light-dark(#FFCF4B, #D8EE8A);
  --color-star: light-dark(#E8A300, #F2C94C);
  --color-dot-grid: light-dark(#E9DCD3, rgb(242 238 244 / 0.12));
  --color-sticker-edge: light-dark(#FFFFFF, #F2EEF4);

  /* Calendar, aligned with the app's calendar event colors */
  --color-event-a: light-dark(#E0E7F4, #2D394E);
  --color-event-b: light-dark(#F5EBF2, #422F40);
  --color-event-dot-a: light-dark(#E07A1F, #F0A15C);
  --color-event-dot-b: light-dark(#6750A4, #D8EE8A);
  --color-today-bg: light-dark(#282928, #B39DEB);
  --color-today-fg: light-dark(#FFFFFF, #251C39);

  /* Elevation */
  --color-shadow: light-dark(rgb(96 52 40 / 0.14), rgb(0 0 0 / 0.50));
  --color-shadow-soft: light-dark(rgb(96 52 40 / 0.06), rgb(0 0 0 / 0.30));
  --shadow-soft: 0 1px 2px var(--color-shadow-soft), 0 8px 24px var(--color-shadow-soft);
  --shadow-card: 0 18px 40px var(--color-shadow);
  --shadow-float: 0 28px 64px var(--color-shadow);

  /* Typography */
  --font-display: "Poppins", ui-sans-serif, system-ui, sans-serif;
  --font-body: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --font-script: "Caveat", "Segoe Print", cursive;

  --text-display: clamp(2.75rem, 1.5rem + 4.4vw, 4.75rem);
  --text-h2: clamp(2rem, 1.45rem + 1.9vw, 2.75rem);
  --text-h3: 1.25rem;
  --text-lead: clamp(1.0625rem, 0.98rem + 0.4vw, 1.25rem);
  --text-body: 1rem;
  --text-small: 0.9375rem;
  --text-caption: 0.8125rem;
  --text-script: clamp(1.5rem, 1.3rem + 0.7vw, 1.875rem);

  --leading-tight: 1.06;
  --leading-heading: 1.2;
  --leading-body: 1.6;
  --tracking-display: -0.025em;
  --tracking-heading: -0.02em;

  /* Spacing (4px base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 2rem;
  --space-8: 2.5rem;
  --space-9: 3.5rem;
  --space-10: 5rem;
  --section-gap: clamp(4rem, 2.8rem + 5vw, 7.5rem);

  /* Radii */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* Layout */
  --container: 1280px;
  --gutter: clamp(1rem, 0.2rem + 4vw, 5rem);
  --header-height: 88px;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 160ms;
  --duration-base: 260ms;
}

[data-theme="light"] {
  color-scheme: light;
}

[data-theme="dark"] {
  color-scheme: dark;
}