/* =============================================================================
 * triple.quest — design tokens
 * -----------------------------------------------------------------------------
 * The ENTIRE skin lives here. Re-theming the app = editing this file (or adding
 * another [data-theme="..."] block). app.css and every component reference these
 * custom properties and never hard-code a colour, radius, or shadow.
 *
 * Themes ship as token overrides on <html data-theme="...">:
 *   (default / no attribute) ...... "Deepcore" — dark sci-fi / neon mining
 *   [data-theme="daylight"] ....... light surface alternate (proves the layer)
 *   [data-theme="tg"] ............. plot67: maps Telegram WebApp vars onto tokens
 *
 * Naming: --c-*  colour   --space-*  spacing   --radius-*  corner
 *         --shadow-*  elevation   --font-*  type   --z-*  stacking
 * ========================================================================== */

:root {
	/* ---- Palette: Deepcore (dark sci-fi mining) ----------------------------- */
	--c-bg:            #0d1117;   /* page background (near-black slate)        */
	--c-bg-2:          #0a0e14;   /* deeper wells / inset                      */
	--c-surface:       #161b22;   /* panels / cards                            */
	--c-surface-2:     #1c232d;   /* raised surface / hover                    */
	--c-surface-3:     #232c38;   /* table stripe / active                    */
	--c-overlay:       rgba(3, 6, 10, 0.72);  /* modal/offcanvas backdrop      */

	--c-border:        #273140;   /* default hairline                          */
	--c-border-strong: #3a4756;   /* emphasised edge                           */

	--c-text:          #e6edf3;   /* primary text                             */
	--c-text-muted:    #8b97a7;   /* secondary text                           */
	--c-text-faint:    #5e6b7a;   /* tertiary / disabled                      */
	--c-text-on-accent:#04130f;   /* text sitting on a bright accent fill      */

	--c-primary:       #00e5b0;   /* neon teal — primary actions, links       */
	--c-primary-2:     #19f0c0;   /* hover                                     */
	--c-primary-dim:   rgba(0, 229, 176, 0.14);  /* subtle fills/badges        */
	--c-primary-border:rgba(0, 229, 176, 0.40);

	--c-accent:        #ffb020;   /* amber — secondary highlight / coins      */
	--c-accent-dim:    rgba(255, 176, 32, 0.14);

	--c-success:       #2ec98a;
	--c-success-dim:   rgba(46, 201, 138, 0.15);
	--c-warn:          #ffb020;
	--c-warn-dim:      rgba(255, 176, 32, 0.15);
	--c-danger:        #ff5d6c;
	--c-danger-dim:    rgba(255, 93, 108, 0.15);
	--c-info:          #4aa8ff;
	--c-info-dim:      rgba(74, 168, 255, 0.15);

	/* Game-flavoured extras */
	--c-glow:          rgba(0, 229, 176, 0.45);    /* focus ring / button glow  */
	--panel-border:    1px solid var(--c-border);
	--panel-sheen:     linear-gradient(180deg, rgba(255,255,255,0.03), transparent 40%);
	--topbar-bg:       linear-gradient(180deg, #11171f, #0d1117);

	/* Resource accents (dirt / mud / water mining theme) */
	--c-dirt:          #b07b46;
	--c-mud:           #7c5a3a;
	--c-water:         #3fb6e8;

	/* ---- Typography --------------------------------------------------------- */
	--font-sans: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
	--font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
	--font-display: var(--font-sans);

	--fs-xs:   0.75rem;
	--fs-sm:   0.875rem;
	--fs-base: 1rem;
	--fs-lg:   1.125rem;
	--fs-xl:   1.375rem;
	--fs-2xl:  1.75rem;
	--fs-3xl:  2.25rem;
	--lh-tight: 1.2;
	--lh-base:  1.5;
	--fw-normal: 400;
	--fw-medium: 500;
	--fw-semibold: 600;
	--fw-bold: 700;

	/* ---- Spacing scale (4px base) ------------------------------------------ */
	--space-0: 0;
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.5rem;
	--space-6: 2rem;
	--space-7: 3rem;
	--space-8: 4rem;

	/* ---- Radius ------------------------------------------------------------- */
	--radius-sm: 4px;
	--radius:    8px;
	--radius-lg: 14px;
	--radius-pill: 999px;

	/* ---- Elevation ---------------------------------------------------------- */
	--shadow-sm: 0 1px 2px rgba(0,0,0,0.35);
	--shadow:    0 6px 20px rgba(0,0,0,0.40);
	--shadow-lg: 0 18px 48px rgba(0,0,0,0.55);
	--glow:      0 0 0 3px var(--c-glow);

	/* ---- Layout ------------------------------------------------------------- */
	--container-max: 1180px;
	--topbar-h: 64px;

	/* ---- Motion ------------------------------------------------------------- */
	--ease: cubic-bezier(0.4, 0, 0.2, 1);
	--dur:  140ms;

	/* ---- Stacking ----------------------------------------------------------- */
	--z-topbar:   1000;
	--z-dropdown: 1100;
	--z-offcanvas:1200;
	--z-backdrop: 1300;
	--z-modal:    1310;
	--z-toast:    1400;

	color-scheme: dark;
}

/* =============================================================================
 * Alternate theme — "Daylight" (proves re-skin is a token-only edit)
 * ========================================================================== */
[data-theme="daylight"] {
	--c-bg:            #eef1f5;
	--c-bg-2:          #e3e8ef;
	--c-surface:       #ffffff;
	--c-surface-2:     #f4f6f9;
	--c-surface-3:     #e9edf2;
	--c-overlay:       rgba(20, 28, 38, 0.45);

	--c-border:        #d6dde6;
	--c-border-strong: #b9c3cf;

	--c-text:          #16202b;
	--c-text-muted:    #5a6776;
	--c-text-faint:    #93a0ae;
	--c-text-on-accent:#04130f;

	--c-primary:       #0aa78a;
	--c-primary-2:     #0bbd9c;
	--c-primary-dim:   rgba(10, 167, 138, 0.12);
	--c-primary-border:rgba(10, 167, 138, 0.40);

	--c-accent:        #d98a06;
	--c-accent-dim:    rgba(217, 138, 6, 0.12);

	--c-success:       #16a06a;
	--c-success-dim:   rgba(22, 160, 106, 0.13);
	--c-warn:          #c97a06;
	--c-warn-dim:      rgba(201, 122, 6, 0.13);
	--c-danger:        #d83a4a;
	--c-danger-dim:    rgba(216, 58, 74, 0.12);
	--c-info:          #1f7fd4;
	--c-info-dim:      rgba(31, 127, 212, 0.12);

	--c-glow:          rgba(10, 167, 138, 0.35);
	--panel-sheen:     linear-gradient(180deg, rgba(0,0,0,0.015), transparent 40%);
	--topbar-bg:       linear-gradient(180deg, #ffffff, #f4f6f9);

	--shadow-sm: 0 1px 2px rgba(20,30,45,0.08);
	--shadow:    0 6px 20px rgba(20,30,45,0.12);
	--shadow-lg: 0 18px 48px rgba(20,30,45,0.18);

	color-scheme: light;
}