/* ===========================================================================
   Lingua design tokens
   ---------------------------------------------------------------------------
   The single source of truth for brand values shared by the website and the
   mobile app. Colours, radii, spacing and type — nothing else.

   Deliberately contains NO component or layout rules. Those legitimately differ
   between a content website with page chrome and an app shell, and trying to
   share them means one side spends its life overriding the other. What makes
   the two look like one product is the values below, not the rules.

   CANONICAL COPY: public/css/tokens.css
     - the website links it directly
     - the app needs its own copy, because Capacitor bundles its assets and has
       no network at boot. After changing this file:
           cp public/css/tokens.css mobile/www/css/tokens.css

   HOW TO USE
     New CSS: reach for var(--lg-…) instead of a literal.
     Existing CSS: a.css is 3,364 lines of hardcoded values and is NOT being
     converted in one go. Replace literals with tokens as you touch them.
     Nothing breaks in the meantime — an unused custom property costs nothing.

   VALUES
     Every value here was taken from a.css / a-dark.css as it stands, not
     invented. Where a.css disagrees with itself, the modal-v2 login/register
     panel wins: it is the newest work, it is already border-box and rem-based,
     and it is the design the app is aligning to.
   =========================================================================== */

:root {
    /* --- Brand ---------------------------------------------------------- */
    --lg-red: #fb544e;              /* primary action, links, accents */
    --lg-red-hover: #d93c36;        /* .button-cta:hover */
    --lg-red-shadow: #94332f;       /* text-shadow under the CTA label */

    /* --- Text ----------------------------------------------------------- */
    --lg-text: #272727;             /* body */
    --lg-text-muted: #6b6b7b;       /* modal__forgot, modal__switch */
    --lg-text-soft: #544f4e;        /* button--white label */
    --lg-text-inverse: #ffffff;

    /* --- Surfaces ------------------------------------------------------- */
    --lg-bg: #f9f9f9;               /* body background */
    --lg-surface: #ffffff;          /* cards, inputs, modals */
    --lg-surface-alt: #f3f3f3;      /* .button gradient foot, subtle fills */
    --lg-surface-muted: #eeeeee;    /* .form-error-message background */

    /* --- Borders -------------------------------------------------------- */
    --lg-border: #e8e8e8;           /* most used border in a.css (41x) */
    --lg-border-input: #d6d6dd;     /* modal-v2 .input-text */
    --lg-border-strong: #dbdbdb;    /* .button:hover, select */

    /* --- Radii ---------------------------------------------------------- */
    /* 8px is the dominant radius in a.css (22 uses); 5px is what the primary
       CTA actually uses, so both are named rather than collapsed into one. */
    --lg-radius: 8px;
    --lg-radius-cta: 5px;
    --lg-radius-sm: 4px;
    --lg-radius-lg: 10px;

    /* --- Typography ----------------------------------------------------- */
    --lg-font: "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --lg-line-height: 1.55;
    --lg-font-weight: 400;
    --lg-font-size-sm: 0.85rem;
    --lg-font-size-base: 1rem;
    --lg-font-size-lead: 0.95rem;   /* modal-v2 input font-size */

    /* --- Controls ------------------------------------------------------- */
    --lg-control-padding: 0.8rem 1rem;   /* modal-v2 .input-text */
    --lg-cta-padding: 0.8rem 1.5rem;     /* modal-v2 .button-cta */
    /* Smallest comfortably tappable target on a phone. Not from a.css — the
       website has no such rule, and it is the one value here the app genuinely
       needs that the site never did. */
    --lg-tap-target: 44px;

    /* --- Feedback ------------------------------------------------------- */
    --lg-ok-bg: #e7f6ec;
    --lg-ok-text: #17603a;
    --lg-bad-bg: #fdecea;
    --lg-bad-text: #96271f;
}

/* ===========================================================================
   Dark theme
   ---------------------------------------------------------------------------
   Two triggers, on purpose:

     @media (prefers-color-scheme: dark)   follows the OS. What the app uses.
     [data-theme="dark"] / ="light"        explicit choice, overrides the OS.

   The website currently switches themes by enabling a whole second stylesheet
   (a-dark.css, toggled through `disabled` in header.php). When dark mode is
   added properly, that file can shrink to a token override block like the one
   below instead of re-declaring rules — same values, one place.

   Both selectors are needed. prefers-color-scheme alone gives no way for a user
   toggle to win against the OS, and a class alone means the app ignores the
   system setting until the user finds a switch. Values are from a-dark.css.
   =========================================================================== */

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --lg-text: #e0e0e0;
        --lg-text-muted: #a8a8b4;
        --lg-text-soft: #cfcfcf;

        --lg-bg: #121212;
        --lg-surface: #2b2b2b;
        --lg-surface-alt: #2c2c2c;
        --lg-surface-muted: #333333;

        --lg-border: #444444;
        --lg-border-input: #555555;
        --lg-border-strong: #555555;

        --lg-ok-bg: #12351f;
        --lg-ok-text: #7ddba3;
        --lg-bad-bg: #3a1a17;
        --lg-bad-text: #f3a49c;
    }
}

/* Explicit choice. Repeated rather than shared with the block above because a
   media query and an attribute selector cannot be combined into one rule. */
:root[data-theme="dark"] {
    --lg-text: #e0e0e0;
    --lg-text-muted: #a8a8b4;
    --lg-text-soft: #cfcfcf;

    --lg-bg: #121212;
    --lg-surface: #2b2b2b;
    --lg-surface-alt: #2c2c2c;
    --lg-surface-muted: #333333;

    --lg-border: #444444;
    --lg-border-input: #555555;
    --lg-border-strong: #555555;

    --lg-ok-bg: #12351f;
    --lg-ok-text: #7ddba3;
    --lg-bad-bg: #3a1a17;
    --lg-bad-text: #f3a49c;
}

/* The brand red is intentionally NOT overridden for dark. It is the one value
   that must stay constant for the product to remain recognisable, and at
   #fb544e it already clears contrast on both #f9f9f9 and #121212. */