@layer tokens, base, layout, components, skins;

@layer tokens {
  :root {
    /* Colors: every skin overrides these */
    --color-bg: #fff6fb;
    --color-surface: #ffffff;
    --color-ink: #2a1d3a;
    --color-ink-soft: #5e4e72;
    --color-accent: #ff4fa3;
    --color-accent-2: #7b5cff;
    --color-accent-3: #2ec4ff;
    --color-border: #2a1d3a;
    --color-on-accent: #ffffff;
    --color-focus: #ffd400;
    --color-header-top: var(--color-accent);
    --color-header-nav: var(--color-accent-2);
    --color-footer: var(--color-accent-3);
    --color-header-nav-ink: var(--color-on-accent);
    --color-footer-ink: var(--color-on-accent);
    --edge-color: var(--color-border);
    --color-shine: rgb(255 255 255 / 0.7);
    --color-shine-soft: rgb(255 255 255 / 0.18);
    --color-shade: rgb(0 0 0 / 0.18);
    --bg-pattern: none;
    --bg-pattern-size: auto;
    --floral-pattern: none;
    --floral-pattern-size: auto;

    /* Group 4 component colors (skins may override) */
    --logo-fill-top: var(--color-on-accent);
    --logo-fill-bottom: var(--color-focus);
    --logo-outline: var(--color-border);
    --sparkle-color: var(--color-focus);
    --sticker-color: var(--color-accent);
    --sticker-shine: var(--color-shine);
    --sticker-outline: var(--color-border);
    --gel-color: var(--color-accent);
    --lcd-bg: var(--color-ink);
    --lcd-ink: var(--color-focus);
    --ticker-bg: var(--color-shade);
    --badge-text: var(--color-on-accent);
    --badge-outline: var(--color-border);

    /* Fonts */
    --font-display: "Titan One", "Arial Rounded MT Bold", system-ui, sans-serif;
    --font-body: "Nunito", system-ui, sans-serif;
    --font-pixel: "VT323", ui-monospace, monospace;
    --font-tabs: "Times New Roman", Times, serif;

    /* Type sizes */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-md: 1rem;
    --text-lg: 1.25rem;
    --text-xl: 1.75rem;
    --text-2xl: 2.5rem;

    /* Spacing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;

    /* Frame */
    --header-top-h: 5.5rem;
    --header-nav-h: 3rem;
    --footer-h: 2.5rem;
    --frame-gap: var(--space-3);
    --frame-max-w: 1400px;

    /* Component sizes */
    --logo-size: var(--text-2xl);
    --logo-outline-w: 6px;
    --sticker-sm: 1rem;
    --sticker-md: 1.5rem;
    --sticker-lg: 2.5rem;
    --icon-spot: 1.6rem;
    --badge-w: 88px;
    --badge-h: 31px;
    --gradient-bar-h: 6px;
    --edge-w: 2px;
    --ticker-max-w: 36rem;

    /* Shapes */
    --radius-sm: 6px;
    --radius-md: 14px;
    --radius-lg: 24px;
    --radius-pill: 999px;
    --note-w: 36rem;
    --border-w: 3px;
    --shadow-pop: 4px 4px 0 var(--color-border);
    --shadow-pop-sm: 2px 2px 0 var(--color-border);

    /* Motion */
    --speed-fast: 150ms;
    --speed-slow: 400ms;
    --ticker-duration: 24s;
    --twinkle-duration: 1.8s;
  }

  /* Short laptop screens: tighter frame */
  @media (max-height: 800px) {
    :root {
      --header-top-h: 4rem;
      --header-nav-h: 2.5rem;
      --footer-h: 2rem;
      --frame-gap: var(--space-2);
      --logo-size: var(--text-xl);
      --logo-outline-w: 5px;
      --badge-h: 24px;
      --badge-w: 68px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    :root {
      --speed-fast: 0ms;
      --speed-slow: 0ms;
    }
  }
}

@layer tokens {
  :root {
    --editor-panel-w: 17rem;
    --editor-handle: 12px;
  }
}

@layer tokens {
  :root {
    /* Phone mode (Group 12): smallest comfortable tap area */
    --tap-min: 2.75rem;
  }
}

@layer tokens {
  :root {
    /* Group 13: focus outline = gold ring with a navy edge on both sides */
    --focus-w: var(--border-w);
    --focus-gap: 2px;
    --color-focus-edge: var(--color-border);
  }
}