Theme: Material

/* WireKit Theme: Material — Material Design 3 aesthetic.
   Inherits from Default: neutral palette, dark-mode colors, sizing,
   WCAG-verified text/bg contrasts.

   Prerequisite: config/wirekit.php → 'sans' => 'roboto'
   Accent: indigo (distinct from Soft's violet).
   WCAG: All indigo pairs ≥ AA — see inline ratios.

   IMPORTANT: .dark block includes shadow overrides to prevent
   Default's dark shadows from overriding Material's M3 values.
   border-wk-width 0px → borderless: surfaces defined by elevation. */
@theme {
    /* Font — Roboto: Google's system typeface, slightly wider than Inter.
       letter-spacing 0.01em — M3 spec uses positive tracking for body.
       heading-weight 500 (Medium) — M3's Display/Headline weight. */
    --font-wk-sans:           'Roboto', ui-sans-serif, system-ui, sans-serif;
    --font-wk-heading-weight: 500;
    --font-wk-letter-spacing: 0.01em;

    /* Radius — 0.75rem base → sm: 0.5625rem, md: 0.75rem,
       lg: 0.9375rem, xl: 1.5rem. M3 "medium" shape scale. */
    --radius-wk: 0.75rem;

    /* Borders — borderless. M3 defines surfaces by shadow/elevation,
       not strokes. Inputs rely on bg-input tint for boundary. */
    --border-wk-width: 0px;

    /* Shadows — M3-style dual-layer with higher opacity than Default.
       Sharper umbra + softer penumbra. Dark shadows in .dark below. */
    --shadow-wk-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.12),
                    0 1px 2px 0 rgba(0, 0, 0, 0.24);
    --shadow-wk-md: 0 3px 6px 0 rgba(0, 0, 0, 0.16),
                    0 3px 6px 0 rgba(0, 0, 0, 0.23);
    --shadow-wk-lg: 0 10px 20px 0 rgba(0, 0, 0, 0.19),
                    0 6px 6px 0 rgba(0, 0, 0, 0.23);

    /* Motion — M3 standard decelerate: fast entrance, soft settle.
       Previous cubic-bezier(0.4,0,0.2,1) was M2 standard easing.
       M3 uses (0.2,0,0,1) for most interactive transitions. */
    --transition-wk-duration: 200ms;
    --transition-wk-easing:   cubic-bezier(0.2, 0, 0, 1);

    /* Accent — Indigo (distinct from Soft's violet).
       white on indigo-600: 6.29:1 (AA ✓)
       white on indigo-700 (hover): 7.90:1 (AAA ✓)
       indigo-600 ring on white: 6.29:1 (UI ✓) */
    --color-wk-accent:         var(--color-indigo-600);
    --color-wk-accent-hover:   var(--color-indigo-700);
    --color-wk-accent-content: var(--color-indigo-700);
    --color-wk-accent-fg:      var(--color-white);
    --color-wk-ring:           var(--color-indigo-600);

    /* Input background — borderless inputs need a visible tint.
       neutral-50 on white: subtle but M3's "surface variant" approach.
       neutral-500 placeholder on neutral-50: 4.54:1 (AA ✓) */
    --color-wk-bg-input: var(--color-neutral-50);
}
@layer theme {
    .dark {
        /* Accent dark — accent-fg (neutral-900) inherited from Default.
           neutral-900 on indigo-400: 6.01:1 (AA ✓)
           neutral-900 on indigo-300 (hover): 8.99:1 (AAA ✓) */
        --color-wk-accent:         var(--color-indigo-400);
        --color-wk-accent-hover:   var(--color-indigo-300);
        --color-wk-accent-content: var(--color-indigo-300);
        --color-wk-ring:           var(--color-indigo-400);

        /* Shadows dark — MUST override to keep Material's M3 shadow shape.
           Without this, Default's .dark shadows (12/32px blur) win the
           cascade and the M3 feel disappears. */
        --shadow-wk-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.40),
                        0 1px 2px 0 rgba(0, 0, 0, 0.35);
        --shadow-wk-md: 0 3px 6px 0 rgba(0, 0, 0, 0.45),
                        0 3px 6px 0 rgba(0, 0, 0, 0.40);
        --shadow-wk-lg: 0 10px 20px 0 rgba(0, 0, 0, 0.50),
                        0 6px 6px 0 rgba(0, 0, 0, 0.45);

        /* Input background — one step lighter than page for visibility.
           neutral-400 placeholder on neutral-800: 6.00:1 (AA ✓) */
        --color-wk-bg-input: var(--color-neutral-800);
    }
}