/* ===========================================================
   Tagda Timer — design tokens
   Every visual value lives here as a CSS custom property so the
   appearance editor can rewrite them live with zero re-render.
   =========================================================== */

:root {
  /* --- palette (overwritten by theme presets + user edits) --- */
  --bg:            #07070c;
  --bg-2:          #101019;
  --surface:       #14141f;
  --surface-2:     #1b1b29;
  --border:        #2a2a3d;
  --text:          #ececf5;
  --text-dim:      #9a9ab4;
  --text-faint:    #5d5d78;
  --accent:        #7c5cff;
  --accent-2:      #35e6c5;
  --ok:            #3ddc84;
  --warn:          #ffb020;
  --danger:        #ff4d6d;
  --gold:          #ffd166;
  /* Text/icons printed on top of --accent. js/theme.js rewrites this from the
     accent's own brightness, so a pale accent gets dark type instead of the
     white-on-white it used to get. */
  --on-accent:     #ffffff;

  /* --- timer state colours --- */
  --t-idle:        var(--text);
  --t-holding:     #ff4d6d;
  --t-ready:       #3ddc84;
  /* Follows the idle colour so a theme only has to state --t-idle once. */
  --t-running:     var(--t-idle);

  /* --- geometry --- */
  --radius:        18px;
  --radius-sm:     10px;
  --border-w:      1px;
  --panel-alpha:   0.55;
  --panel-blur:    22px;
  --shadow:        0 24px 60px -20px rgba(0,0,0,.75);

  /* --- typography --- */
  --font-ui:       'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:     'JetBrains Mono', ui-monospace, 'Cascadia Mono', monospace;
  --font-timer:    'JetBrains Mono', ui-monospace, monospace;
  /* Same shape applyTheme() writes at the default size, for the same reason. */
  --timer-size:    clamp(3rem, 15vw, 11.5rem);
  --timer-weight:  700;
  --timer-track:   -0.045em;
  --timer-glow:    0px;                 /* px blur of accent glow behind digits */

  /* --- background layer --- */
  --bg-blur:       0px;
  --bg-dim:        0.35;
  --bg-sat:        1;
  --bg-scale:      1;

  /* --- motion --- */
  --dur-fast:      140ms;
  --dur:           260ms;
  --dur-slow:      620ms;
  --ease:          cubic-bezier(.22,1,.36,1);
  --ease-back:     cubic-bezier(.34,1.56,.64,1);
  --motion:        1;                   /* 0 disables transforms via calc() */

  /* --- density --- */
  --gap:           16px;
  --pad:           18px;

  /* --- user-adjustable sizes (Appearance -> Sizes) ---
     Each is a plain multiplier the size sliders rewrite live, applied on top
     of the responsive clamp() that already sizes the element. That keeps the
     layout fluid at every window size instead of pinning it to fixed pixels. */
  /* These four are the defaults in js/theme.js, written out again here on
     purpose: the stylesheet paints the first frame and applyTheme() only lands
     once IndexedDB has answered, so a different value here is a layout shift
     on every single load — the rails were 236px wide until the settings
     arrived and then jumped to 290. Keep the two lists in step. */
  --scramble-scale: 1;
  --cube-scale:     1.2;
  --sidebar-w:      290px;
  --sidebar-text:   1;
  --times-scale:    1;

  /* Room reserved at the foot of the sidebar for the creator chip, which is
     pinned to the bottom-left corner and would otherwise sit on top of the
     stats panel. */
  --chip-clearance: 36px;
  /* The same idea down the other side. The scramble preview floats in the
     bottom-right corner, which is on top of the right-hand rail — with enough
     of a session to fill it, the cube covered the session bests and the trend
     chart. This is the preview's own height (holder + grip + 2D/3D toggle)
     plus its 18px inset, and it tracks the size slider because the preview
     does. */
}

/* ======================= PRESET THEMES ======================= */

/* Every theme states its own type colours, and they are the real thing rather
   than a hint of one: --text paints the scramble, the stats, the solve list and
   the panel headings, so anything short of a genuine tint just reads as white
   again. Each is pulled well into its own palette while staying comfortably
   above 7:1 against that theme's background. Carbon is the deliberate
   exception — a monochrome theme with a white accent is the entire idea. */

[data-theme="nebula"] { /* default — deep violet glass */
  --bg:#07070c; --bg-2:#12102a; --surface:#151423; --surface-2:#1e1c33;
  --border:#2e2b4a; --text:#cdbfff; --text-dim:#9a8cd6; --text-faint:#6b6297;
  --accent:#7c5cff; --accent-2:#35e6c5;
  --t-idle:#c3b2ff;
}

[data-theme="carbon"] { /* near-black, minimal, high contrast */
  --bg:#050505; --bg-2:#0d0d0d; --surface:#111111; --surface-2:#181818;
  --border:#262626; --text:#f2f2f2; --text-dim:#8f8f8f; --text-faint:#585858;
  --accent:#ffffff; --accent-2:#7c7c7c; --panel-alpha:.7; --radius:12px;
  /* The one theme that stays neutral on purpose — that is what Carbon is. */
  --t-idle:#ffffff;
}

[data-theme="vaporwave"] {
  --bg:#12002e; --bg-2:#3d0a5c; --surface:#220a45; --surface-2:#2f0f5c;
  --border:#5a2a8c; --text:#ffc4f4; --text-dim:#cf90e4; --text-faint:#8b64b0;
  --accent:#ff5ed2; --accent-2:#4de8ff; --timer-glow:26px;
  --t-idle:#ff8ae0;
}

[data-theme="paper"] { /* light */
  --bg:#f3f1ec; --bg-2:#e6e2d9; --surface:#ffffff; --surface-2:#f7f5f1;
  --border:#d8d3c8; --text:#3a2a1c; --text-dim:#7a6a58; --text-faint:#a49a88;
  --accent:#1b1a17; --accent-2:#c2410c; --panel-alpha:.72; --t-idle:#2a1d12;
  --shadow:0 18px 40px -22px rgba(0,0,0,.35); --bg-dim:.06;
}

[data-theme="terminal"] {
  --bg:#000700; --bg-2:#031a05; --surface:#041205; --surface-2:#08210b;
  --border:#12471a; --text:#7dff9b; --text-dim:#45c25c; --text-faint:#2f7a3c;
  --accent:#39ff6a; --accent-2:#b9ffc4; --radius:4px; --radius-sm:3px;
  --t-idle:#39ff6a;
  --font-ui:'JetBrains Mono', monospace; --timer-glow:18px;
}

[data-theme="speedcube"] { /* WCA sticker colours */
  --bg:#0a0a0a; --bg-2:#141414; --surface:#131313; --surface-2:#1c1c1c;
  --border:#2b2b2b; --text:#ffcfae; --text-dim:#b0937f; --text-faint:#6f5f54;
  --accent:#ff5800; --accent-2:#00a651; --ok:#00a651; --danger:#c41e3a; --warn:#ffd500;
  --t-idle:#ff7a2e;
}

[data-theme="ice"] {
  --bg:#04101c; --bg-2:#0a2036; --surface:#0b1c2e; --surface-2:#11293f;
  --border:#1d4160; --text:#b9e6ff; --text-dim:#7fb2d6; --text-faint:#527e9c;
  --accent:#4cc9ff; --accent-2:#a0f0ff; --timer-glow:20px;
  --t-idle:#8ad8ff;
}

/* ==================== reduced motion ==================== */
[data-motion="off"] * ,
[data-motion="off"] *::before,
[data-motion="off"] *::after {
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
}
[data-motion="reduced"] { --dur-slow: 220ms; --dur: 140ms; }

@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="full"]) * {
    animation-duration:.001ms !important; transition-duration:.001ms !important;
  }
}

/* ==================== density ==================== */
[data-density="compact"]   { --gap:10px; --pad:12px; --radius:12px; }
[data-density="spacious"]  { --gap:24px; --pad:26px; --radius:24px; }

/* ==================== panel style ====================
   "widget" is the default frosted card. "flat" strips the card away entirely —
   no fill, no border, no shadow, no blur — so the content sits directly on the
   background, the way csTimer looks. Only the chrome goes; every size, gap and
   position is untouched, so switching cannot reflow the app. */
[data-panels="flat"] {
  --pad: 4px;
  --panel-alpha: 0;
  --shadow: none;
}
[data-panels="flat"] .panel,
[data-panels="flat"] #cube-fallback,
[data-panels="flat"] .view-toggle,
[data-panels="flat"] #creator-chip,
[data-panels="flat"] .scramble,
[data-panels="flat"] .seg-btn {
  background: none;
  border-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
/* the glossy highlight sweep is part of the card, not the content */
[data-panels="flat"] .panel::after { display: none; }
[data-panels="flat"] .times-foot { border-top-color: color-mix(in srgb, var(--border) 60%, transparent); }

/* ==================== automatic contrast ====================
   Set by js/contrast.js after sampling the actual background. A bright photo
   or a white solid means the whole surface set has to flip, not just the text —
   dark glass panels with dark type on a white photo are unreadable.

   Deliberately after the theme presets so it wins on equal specificity, and
   deliberately not touching --bg / --bg-2: those paint the dimming veil behind
   the content, and the sampler has already accounted for them. */
[data-bg-luma="light"] {
  --surface:    #ffffff;
  --surface-2:  #f2f2f6;
  --border:     #d2d2dd;
  --text:       #101018;
  --text-dim:   #45455a;
  --text-faint: #75758c;
  --panel-alpha: .74;
  --shadow:     0 18px 44px -22px rgba(0,0,0,.4);
  --t-idle:     #101018;
  --t-running:  #101018;
}