/* ══════════════════════════════════════════════════════════════════════
   Smooth theme — clean, modern, Saira typeface
   Dark:  Prussian Blue · Deep Teal · Jasmine · Brick Ember · Blood Red
   Light: Cream · Deep Teal · Terracotta
   Applied when data-style is absent or "smooth".

   Every colour is `light-dark(<light>, <dark>)`, resolved against the
   root `color-scheme` (see tokens.css), so auto / light / dark share this
   one block.
   ══════════════════════════════════════════════════════════════════════ */

:root:not([data-style]),
:root[data-style="smooth"] {
  --font-body: "Saira Variable", sans-serif;

  /* Text */
  --color-text: light-dark(#0e3a42, #e9eef2);
  --color-text-secondary: light-dark(#35626b, #a3b9c7);
  --color-text-muted: light-dark(#4d7178, #7b93a6);
  --color-on-accent: light-dark(#fffaf0, #001427);

  /* Surfaces — sunken (inputs, wells) < bg < surface (cards) < raised
     (menus, modals, hovered chips). Dark tiers step up in Prussian Blue;
     light tiers step from cream to white. */
  --color-bg: light-dark(#faf5e9, #01152a);
  --color-surface: light-dark(#fffdf8, #0a2139);
  --color-surface-raised: light-dark(#ffffff, #112a46);
  --color-surface-sunken: light-dark(#f3ecdd, #000f20);

  /* Borders — hairlines tinted from the text colour */
  --color-border: light-dark(rgb(14 58 66 / 0.13), rgb(163 185 199 / 0.14));
  --color-border-subtle: light-dark(
    rgb(14 58 66 / 0.08),
    rgb(163 185 199 / 0.09)
  );

  /* Accent — Jasmine (dark) / Terracotta (light) */
  --color-accent: light-dark(#b54a41, #f4d58d);
  --color-accent-hover: light-dark(#a3423a, #f8e2ae);
  --color-accent-soft: light-dark(
    rgb(181 74 65 / 0.1),
    rgb(244 213 141 / 0.12)
  );
  --color-focus-ring: light-dark(
    rgb(181 74 65 / 0.35),
    rgb(244 213 141 / 0.4)
  );

  /* Links */
  --color-link: light-dark(#b54a41, #f4d58d);
  --color-link-hover: light-dark(#a3423a, #f8e2ae);

  /* Danger — Brick Ember, lifted for legibility on Prussian Blue */
  --color-danger: light-dark(#b3392f, #f0706a);
  --color-danger-bg: light-dark(#f9e3df, rgb(191 6 3 / 0.18));
  --color-danger-hover: light-dark(#b3392f, #bf0603);

  /* Success — Deep Teal */
  --color-success: light-dark(#25746f, #8fb3a3);
  --color-success-bg: light-dark(#dff1ef, rgb(112 141 129 / 0.18));
  --color-success-hover: light-dark(#1f6b67, #a6c6b8);

  --color-warning: light-dark(#a86a00, #e8b44f);

  /* Overlays */
  --color-overlay: light-dark(rgb(24 30 34 / 0.32), rgb(0 6 14 / 0.6));
  --color-header-user-bg: transparent;
  --color-header-user-bg-hover: light-dark(
    rgb(14 58 66 / 0.07),
    rgb(233 238 242 / 0.08)
  );

  /* Misc */
  --color-option-bg: light-dark(#fffdf8, #112a46);
  --color-option-border: light-dark(rgb(14 58 66 / 0.08), rgb(163 185 199 / 0.09));

  /* Shape & depth */
  --border-width: 1px;
  --shadow-color: light-dark(rgb(14 58 66 / 0.16), rgb(0 0 0 / 0.5));
  --shadow-color-soft: light-dark(rgb(14 58 66 / 0.07), rgb(0 0 0 / 0.3));
  --shadow-color-strong: light-dark(rgb(14 58 66 / 0.26), rgb(0 0 0 / 0.7));
  --shadow-1: 0 1px 2px var(--shadow-color-soft);
  --shadow-2: 0 8px 24px -6px var(--shadow-color), 0 1px 2px var(--shadow-color-soft);
  --shadow-3: 0 24px 56px -12px var(--shadow-color-strong), 0 2px 6px var(--shadow-color-soft);

  /* Component skins */
  --header-bg: var(--color-bg);
  --input-focus-bg: var(--color-surface);
  --overlay-filter: blur(3px);
  --modal-border: var(--color-border);
  --card-border: transparent;
  --card-border-width: 2px;
  --card-hover-border: color-mix(
    in srgb,
    var(--color-accent) 50%,
    var(--color-surface)
  );
  --tab-border: transparent;
  --btn-primary-shadow: var(--shadow-1);
  --btn-primary-shadow-hover: var(--shadow-1);
}

/* A pointed-at journal headline sits on frosted page colour rather than on
   black glass: terracotta on cream and jasmine on Prussian Blue are the
   pairs this palette was picked for, where the accent on a black plate
   would lose the light scheme's terracotta. */
:root:not([data-style]) .journal-card--image .journal-card-title,
[data-style="smooth"] .journal-card--image .journal-card-title {
  --journal-title-hover-bg: light-dark(
    rgb(255 253 248 / 0.9),
    rgb(1 21 42 / 0.78)
  );
  --journal-title-hover-radius: var(--radius-md);
  --journal-title-hover-filter: blur(6px);
}