/* assets/css/shared.css
   Centralized Color & Design-Token System — Ashraf Tools (Myanas theme)

   This file is the single source of truth for the values that were
   previously repeated across kuaishou-video.css, url-shortener.css and
   yt-thumbnail.css. Each of those files still keeps its own
   tool-prefixed variable names (--kuaishou-*, --url-*, --at-yt-*) so
   nothing elsewhere in those files needs to change — the tool-prefixed
   names now simply alias to the shared tokens below.

   FIX (colors not matching the theme): all three tools previously read
   var(--wp--preset--color--primary/accent/surface/foreground/muted/
   border, <fallback hex>). The Myanas theme does NOT define those
   standard WordPress preset-color variables on the front end — its
   real design tokens are --coral-dark/-mid/-bright, --cyan-bright,
   --text-primary/-secondary/-muted, --surface-card/-strong,
   --bg-deep/-elevated, --border-subtle/-accent (defined inline by
   inc/design-tokens.php — see site-styles-deferred.css's header
   comment). So every tool was silently falling back to its hardcoded
   fallback hex on every page, in both light and dark mode, and never
   actually reading the theme at all. This file now points at the
   theme's real tokens instead, so header/button colors follow the
   theme's actual coral/cyan palette and update automatically if that
   palette changes.

   The hex fallbacks below are only a last-resort safety net in case
   this plugin ever runs on a page where inc/design-tokens.php hasn't
   printed yet — on the live Myanas theme the real token always wins.

   SYNC (fallback values updated to match the theme's current palette):
   the theme's own design tokens moved from an orange/teal-on-light
   palette to a violet/cyan duotone on a near-black background (see
   inc/design-tokens.php's :root block). The fallback hex values below
   are updated to match that current palette so the safety-net colors
   (only ever seen if the real variable is missing) look consistent
   with the theme instead of reverting to the old palette. This is a
   fallback-only change — on the live Myanas theme the real token
   always wins and nothing here is visible.

   Electricity Calculator is a separate, pre-existing design system
   and is intentionally NOT part of this centralization — it is not
   loaded by, and does not depend on, this file. */

:root {
    /* Theme-linked brand colors — real Myanas design tokens. */
    --at-primary: var(--coral-dark, #5b21b6);
    --at-primary-dark: color-mix(in srgb, var(--at-primary) 80%, black);
    --at-accent: var(--cyan-bright, #22d3ee);
    --at-surface: var(--surface-card, #12142ba6);
    --at-foreground: var(--text-primary, #f4f5fb);
    --at-muted: var(--text-muted, #E6E6EA);
    --at-border: var(--border-subtle, #9296b826);

    /* Shared system font stack — used instead of a render-blocking
       @import or web font, so every tool shares one lightweight,
       already-loaded font family. */
    --at-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;

    /* Success / Error / Disabled are fixed usability-signal colors, not
       decorative theme colors — kept the same regardless of the active
       theme palette, so "success" always reads green and "error"
       always reads red. Not overridable by the theme's Color Variables. */
    --at-success: #10b981;
    --at-success-bg: #d1fae5;
    --at-success-text: #065f46;
    --at-error-bg: #fee2e2;
    --at-error-text: #dc2626;
    --at-disabled-bg: #94a3b8;

    /* Shared outer-card shadow, identical across every tool's main
       container. */
    --at-card-shadow:
        rgba(0, 0, 0, 0.4) 0px 2px 4px,
        rgba(0, 0, 0, 0.3) 0px 7px 13px -3px,
        rgba(0, 0, 0, 0.2) 0px -3px 0px inset;

    /* NEW: Shared structural design tokens — container/header/badge/
       input/button sizing. Previously each tool (kuaishou-video.css,
       url-shortener.css, yt-thumbnail.css, yt-transcriber.css,
       qr-code-generator.css) hardcoded its own padding/font-size/
       radius for these pieces, and they had quietly drifted apart
       (e.g. yt-thumbnail's input was 18px 20px / 17px while every
       other tool's was 12px 14px / 0.95rem). These tokens are now the
       single source of truth for that chrome, so every tool's input
       field, button, header bar and badge is the same height, width,
       padding and text size — only each tool's own icons/colors/
       functionality differ. Electricity Calculator is intentionally
       excluded, same as the color tokens above. */
    --at-container-radius: 12px;
    --at-container-radius-mobile: 10px;
    --at-container-radius-xs: 8px;
    --at-container-margin: 8px auto;
    --at-container-margin-mobile: 6px auto;
    --at-container-margin-xs: 4px auto;
    --at-container-margin-tablet: 10px 0;
    --at-container-margin-desktop: 12px 0;

    --at-header-padding: 12px 16px;
    --at-header-padding-mobile: 12px 12px;
    --at-header-font-size: 1.2rem;
    --at-header-font-size-mobile: 1.1rem;
    --at-header-font-weight: 800;

    --at-badge-padding: 4px 12px;
    --at-badge-font-size: 0.75rem;
    --at-badge-radius: 20px;
    --at-badge-font-weight: 500;
    --at-badge-bg: rgba(255, 255, 255, 0.25);

    --at-group-border-width: 2px;
    --at-group-radius: 8px;
    --at-group-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);

    --at-input-padding: 12px 14px;
    --at-input-padding-mobile: 12px 14px;
    --at-input-font-size: 0.95rem;
    --at-input-font-weight: 500;

    --at-button-padding: 0 16px;
    --at-button-padding-mobile: 12px;
    --at-button-font-size: 0.9rem;
    --at-button-font-size-mobile: 0.85rem;
    --at-button-font-weight: 600;

    /* NEW: Shared "full-width CTA" button — the large single action
       button that sits below a result (e.g. "Copy short link" /
       "Download HD image" / "Download PNG"). Previously the literal
       `14px 20px` + `0.95rem` was repeated by hand in
       url-shortener.css, yt-thumbnail.css and qr-code-generator.css;
       this is now the single source of truth for that pattern. */
    --at-cta-padding: 14px 20px;
    --at-cta-padding-mobile: 12px 16px;
    --at-cta-font-size: 0.95rem;

    --at-message-padding: 10px 14px;
    --at-message-font-size: 0.85rem;
    --at-message-radius: 8px;
    --at-message-margin-top: 12px;

    /* NEW: Shared content-section padding — the horizontal/vertical
       inset every tool applies below its header bar (input sections,
       result areas, output boxes). Previously each tool hardcoded its
       own value and they had quietly drifted apart (kuaishou-video.css
       and url-shortener.css used 8px, yt-transcriber.css and
       qr-code-generator.css used 16px, yt-thumbnail.css used 24px on
       the container itself). Now the single source of truth, so every
       tool's content sits at the same distance from its container
       edges on every breakpoint. */
    --at-section-padding: 16px;
    --at-section-padding-mobile: 10px;

    /* NEW: Dark-mode Success / Error message colors. The light-mode
       success/error colors above are fixed usability signals; their
       dark-mode equivalents were previously repeated with slightly
       different hex values in each tool's file (e.g. url-shortener.css
       used #1a3a2e/#a7f3d0 for dark success while kuaishou-video.css
       and yt-thumbnail.css used #0d2620/#6ee7b7). These are now the
       single source of truth so a dark-mode success always reads the
       same green and a dark-mode error always reads the same red in
       every tool. */
    --at-success-bg-dark: #0d2620;
    --at-success-text-dark: #6ee7b7;
    --at-error-bg-dark: #2b1414;
    --at-error-text-dark: #fca5a5;
    --at-error-border-dark: #dc2626;
}