/* Trovaro design tokens — the "wine & gold" identity.

   Placed in the `theme` layer (the last, highest-priority layer in blitz's
   `@layer reset, base, components, utilities, theme`). Custom properties
   resolve by the full cascade, so defining them here guarantees they beat
   both blitz's base-layer tokens (--font-family, --color-primary) AND its
   component-layer tokens (--button-primary-*), regardless of which layer the
   consuming rule lives in. Sorted first among app stylesheets via the leading
   underscore. */

@layer theme {
  :root {
    /* ---- Type ---- */
    --font-family: "Figtree", -apple-system, "system-ui", "Segoe UI",
      "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji";
    --font-brand: "Fredoka", "Figtree", sans-serif;

    /* ---- Wine (primary brand) ---- */
    --wine: #8a2740;
    --wine-hover: #6a1b29;
    --wine-deep: #5b2130;
    --ink: #3a1620; /* darkest headings */

    /* Re-tint everything blitz derives from its central brand color: primary
       buttons, auth pages (login/register), form focus rings, links, spinner. */
    --color-primary: var(--wine);
    --color-primary-hover: var(--wine-hover);

    /* Secondary button keeps its own gold accent. */
    --button-secondary-background-color: var(--gold-ink);
    --button-secondary-background-hover: #6f551a;

    /* ---- Rose / cream surfaces ---- */
    --rose: #efddd8; /* header bar */
    --rose-border: #e6d2d8;
    --rose-tint: #faf3f1; /* hover wash */
    --cream: #faf3ea; /* main reading surface */
    --cream-soft: #fdfaf7; /* dashed panels */
    --surface: #ffffff; /* cards */
    --surface-border: #eee0d8;
    --sidebar-border: #e8d6cd;
    --hairline: #f0e6e0;

    /* Body background follows the warm cream reading surface. */
    --light-gray: var(--cream);

    /* ---- Gold accent ---- */
    --gold: #f6e6c0;
    --gold-hover: #f2ddaa;
    --gold-bright: #f0c65a;
    --gold-ink: #8a6a1f; /* text/icon on gold */

    /* ---- Muted text ramp (mauve, not gray) ---- */
    --muted: #8a6a70;
    --muted-2: #a98f92;
    --muted-3: #c0adb2;

    /* Warm selection to match the gold accent. */
    --selection-color: var(--ink);
    --selection-background-color: #f6e6c0;

    /* Fixed app-header height. Compact on phones, taller on desktop (set in
       the media query below) to give the rose bar the presence it has in the
       design. Every chrome offset (main margin, sidebar top, sticky note bar,
       dropdown anchors) is derived from this so they stay in sync. */
    --app-header-height: 2.75rem;

    /* Shared shape + shadow language. */
    --radius-card: 16px;
    --radius-control: 11px;
    --shadow-card: 0 14px 30px -18px rgba(88, 40, 52, 0.28);
    --shadow-raised: 0 10px 22px -14px rgba(138, 39, 64, 0.6);

    /* Widest the app column (sidebar + content) is allowed to grow. Overrides
       blitz's 98rem base token. ~1596px at the 14px root — fills a 14" MacBook
       Pro fully, nearly fills a 16", and caps growth on large monitors. */
    --content-max-width: 114rem;

    /* Horizontal gutter for the app column. Kept at 0 so the whole column —
       sidebar, header content and main — stays anchored to the viewport's left
       edge at every width: the content grows to fill up to --content-max-width
       and simply stops there, never drifting to the centre when the window is
       enlarged past that cap. (Still a token so every left-offset references one
       value; set it to a centring expression again to re-centre on big screens.) */
    --app-gutter: 0px;
  }

  /* Taller header on desktop, matching the design's generous rose bar. */
  @media (min-width: 900px) {
    :root {
      --app-header-height: 4.25rem;
    }
  }
}

/* Content links are wine. Kept in the `base` layer (not `theme`) so that
   component styles — buttons (.btn is an <a>), nav pills, sidebar rows — in
   the higher `components` layer keep their own colours instead of being
   forced wine. Scoped away from .btn as belt-and-suspenders. */
@layer base {
  a:not(.btn) {
    color: var(--wine);
  }
  a:not(.btn):hover {
    color: var(--wine-hover);
  }
}