/* ============================================================
   Brand: Objatie (objatie.sk / objatie.com — a game for two about what
   each partner wants from the relationship)

   Source: ~/projects/weby/objatie.sk (checked 2026-10-27).
     - logo gradient #F04888 -> #9040D8, dark #FF92C8 -> #C090FF, and the
       mark (two overlapping circles and a heart):
       resources/views/partials/logo.blade.php
     - main colour #ec4899 (Tailwind pink-500) and the Tailwind gray / pink /
       purple steps the app paints with: resources/views/layouts/app.blade.php,
       including its hand-written `.dark` remap (#0f1220, #1e2130, #2a2740 ...).
     Nothing here is invented, with two exceptions that are measured, not
     guessed: --muted and --on-dark-muted. See NOTES.md, "Contrast".

   Font: Plus Jakarta Sans, the face of the app's wordmark. Self-hosted in
   ./fonts/ and declared in ./fonts/fonts.css (since 2026-10-29). Nothing is
   fetched from Google at run time, in the app or in a deck.

   SHAPE. Light and soft, like the app: a light cover on the pink-50 wash the
   app's body fades into, one dark plum band for the chapter break and the
   close. Pills and round tiles, because the mark is two circles.

   THREE LAYERS (brands/README.md). Layer 1 is the ramp: the font, the
   colours and the shape. Layer 2 is the web roles, which the app paints its
   family parts with. Layer 3 is the deck surfaces. Layer 2 was added on
   2026-10-29: the nine roles of the app's public/css/theme.css in v0.21.2,
   value for value, plus the four that the family contract requires and that
   NOTES.md measured on 2026-10-27 (--bg, --bg-sunken, --accent-fill,
   --on-accent). The app reads a vendored copy, so a design change is made HERE.

   HOW THE THEME SWITCHES (layer 2). Each role holds both of its values in one
   `light-dark()` call, light value first. This profile owns ONE rule: the
   `color-scheme: light dark` below. The APPLICATION owns the two rules that
   force a theme, `:root[data-theme="light"|"dark"]`, and a test guards them.
   Do not move either side: brands/README.md, rule 2, says why.
   A deck pins `color-scheme: light` after the import. Layers 1 and 3 are
   static hex, so a deck renders as before.
   ============================================================ */

@import url('./fonts/fonts.css');

:root {
  color-scheme: light dark;

  --font-sans:       'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* dark ground — the app's own dark mode, a blue-plum black */
  --base:            #1a1326;   /* the lower stop of the app's dark body gradient */
  --base-deep:       #0f1220;   /* the upper stop */
  --base-soft:       #2a2740;   /* app dark sunken surface */
  --base-line:       #3a3550;   /* app dark border */

  /* accent — pink. --accent for fills and for accent text on a dark ground;
     --accent-deep for accent TEXT on a light ground (the bright pink is only
     3.53:1 on white). */
  --accent:          #ec4899;   /* pink-500, the app's main colour; 5.11:1 on --base */
  --accent-soft:     #f9a8d4;   /* pink-300, the app's dark-mode pink text */
  --accent-deep:     #be185d;   /* pink-700; 6.04:1 on white, 5.53:1 on --accent-tint */
  --accent-tint:     #fdf2f8;   /* pink-50 */

  /* secondary — the purple end of the logo gradient */
  --second:          #9040D8;   /* 5.37:1 for white text on it; only 3.36:1 on --base, a fill, not text */
  --green:           #15803d;   /* green-700, 5.02:1 on --surface */

  /* light ground */
  --surface:         #ffffff;   /* cards: the app's bg-white */
  --surface-deep:    #fce7f3;   /* pink-100 */
  --muted:           #5b6472;   /* 5.09:1 on --surface-deep. The app's gray-500
                                   (#6b7280) is 4.11:1 there and fails. */

  /* text on a light ground */
  --ink:             #1f2937;   /* gray-800; 14.68:1 on --surface */
  --ink-soft:        #4b5563;   /* gray-600; 6.43:1 on --surface-deep */

  /* text on a dark ground */
  --on-dark:         #f3f4f6;   /* 16.38:1 on --base */
  --on-dark-soft:    #d1d5db;   /* 12.23:1 on --base */
  --on-dark-muted:   #b6bccb;   /*  9.48:1 on --base */

  /* ======================================================================
     Layer 2: the web roles — light value first, dark value second.
     A role reads a ramp token when the ramp holds its exact value.

     Every ratio is calculated, not estimated. A ratio on a foreground is the
     WORST of the three grounds in that theme (--bg, --bg-raised, --bg-sunken),
     light then dark. Text needs 4.5:1, a focus ring 3:1.

     The app paints its pages with Tailwind utilities and their dark remap in
     its own theme.css. These roles paint the family parts (the kit header,
     footer and switches), and they are the contract for anything new.
     The second group has a fill only: it is the purple end of the gradient of
     the app's primary buttons. There is no --ok-*, --warn-* or --danger-* group
     yet: nothing reads one. NOTES.md keeps the measured proposal for them.
     ====================================================================== */

  /* grounds. The page is a gradient (white to pink-50 in light, #0f1220 to
     #1a1326 in dark); --bg is the end that NOTES.md measured. */
  --bg:              light-dark(var(--accent-tint), var(--base-deep));   /* the page */
  --bg-raised:       light-dark(var(--surface), #1e2130);                /* a card */
  --bg-sunken:       light-dark(var(--surface-deep), var(--base-soft));  /* a tinted band */

  /* text */
  --fg:              light-dark(var(--ink), var(--on-dark));             /* 12.49:1 / 13.05:1 */
  --fg-soft:         light-dark(var(--ink-soft), var(--on-dark-soft));   /*  6.43:1 /  9.74:1 */
  --fg-muted:        light-dark(var(--muted), #a3aabb);                  /*  5.09:1 /  6.17:1. Not --on-dark-muted
                                                                             (#b6bccb): the app's value stays. */

  /* lines. --line is the hairline, --line-strong the edge of a control. */
  --line:            light-dark(rgba(31, 41, 55, .12), rgba(243, 244, 246, .16));
  --line-strong:     light-dark(rgba(31, 41, 55, .28), rgba(243, 244, 246, .32));

  /* accent. As a foreground the pink drops to pink-700 in light and climbs to
     pink-300 in dark. As a fill it is pink-600: white on the brand's pink-500
     is only 3.53:1. */
  --accent-fg:       light-dark(var(--accent-deep), var(--accent-soft)); /*  5.14:1 /  7.92:1 */
  --accent-fill:     #db2777;                                            /* pink-600, the same in both themes */
  --on-accent:       #ffffff;                                            /*  4.60:1 on the fill */
  --accent-wash:     light-dark(var(--surface-deep), #4a2838);           /* --accent-fg on it 5.14:1 / 7.01:1 */

  /* second — the purple end of the logo gradient. The app's primary buttons run
     from --accent-fill to --second-fill. White text holds 4.60:1 at the worst
     point of that gradient (its pink end), 5.37:1 at the purple end. */
  --second-fill:     var(--second);                                      /* #9040D8, the same in both themes */
  --on-second:       #ffffff;                                            /*  5.37:1 on the fill */

  /* ⚠️ A FILL IS NOT GUARANTEED AGAINST THE GROUND. --accent-fill is 3.91:1 on
     the light grounds and 3.12:1 on the dark ones; --second-fill is 2.67:1 on
     the dark grounds. Text ON a fill is safe;
     do not let the edge of the fill carry a meaning alone. */

  --focus:           light-dark(var(--accent-deep), var(--accent-soft)); /*  5.14:1 /  7.92:1; a ring needs 3:1 */

  /* ---- shape ------------------------------------------------------------ */
  --font-display:    var(--font-sans);
  --font-text:       var(--font-sans);

  --radius:          20px;      /* the app's rounded-2xl cards are 16px; a slide is bigger */
  --radius-sm:       14px;
  --radius-box:      16px;
  --radius-pill:     999px;
  --radius-dot:      50%;

  --bullet-w:        8px;
  --bullet-h:        8px;
  --bullet-radius:   999px;     /* round: the mark is two circles */
  --tile-radius:     999px;

  --snap-tilt:       -1.2deg;
  --snap-shadow:     0 8px 22px rgba(144, 64, 216, 0.16);

  --cover-logo-h:    52px;
  --end-logo-h:      56px;

  /* ---- surfaces --------------------------------------------------------- */
  --page-bg:         #ffffff;

  /* COVER is light, on the pink-50 wash. It needs the dark-ink logo:
     NOTES.md sets logoCover. */
  --cover-bg:        var(--accent-tint);
  --cover-ink:       var(--ink);
  --cover-ink-soft:  var(--ink-soft);
  --cover-accent:    var(--accent-deep);
  --cover-mark-opacity: 0.9;

  /* SECTION is the one dark band. Pink rail, no ghost number. */
  --section-bg:            var(--base);
  --section-ink:           var(--on-dark);
  --section-ink-soft:      var(--on-dark-muted);
  --section-accent:        var(--accent);
  --section-rail-color:    var(--accent);
  --section-number-color:  transparent;

  /* END is dark, like the section. */
  --end-bg:          var(--base);
  --end-ink:         var(--on-dark);
  --end-ink-soft:    var(--on-dark-muted);
  --end-accent:      var(--accent);
}