/*
Theme Name: Grillo Law
Theme URI: https://grillo.ca
Author: Grillo Law / Zaid Almahameed
Author URI: https://grillo.ca
Description: Dark-first, Option5-inspired theme for Grillo Law's intake automation system. Features dark/light mode toggle, editorial typography, and glass-morphism UI. Controls 100% of visual design for the Grillo Intake, GRIA Portal, and Bridge plugins.
Version: 1.1.0
Requires at least: 6.0
Requires PHP: 8.0
License: Proprietary
License URI: https://grillo.ca/license
Text Domain: grillo-theme
Tags: dark-mode, law-firm, intake-system, custom-theme
*/

/* ═══════════════════════════════════════════════════════════════
   DESIGN SYSTEM — CSS Custom Properties
   Option5.studio aesthetic × Grillo Law brand identity
═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=DM+Sans:ital,opsz,wght@0,9..40,300..700;1,9..40,300..700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
    /* ── Typography Scale ────────────────────────────── */
    --f-display: 'Instrument Serif', Georgia, 'Times New Roman', serif;
    --f-body:    'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --f-mono:    'JetBrains Mono', 'Courier New', monospace;

    --fs-xs:   0.6875rem;   /* 11px */
    --fs-sm:   0.8125rem;   /* 13px */
    --fs-base: 0.9375rem;   /* 15px */
    --fs-md:   1.0625rem;   /* 17px */
    --fs-lg:   1.25rem;     /* 20px */
    --fs-xl:   1.75rem;     /* 28px */
    --fs-2xl:  2.5rem;      /* 40px */
    --fs-3xl:  3.5rem;      /* 56px */
    --fs-hero: 5rem;        /* 80px */

    --lh-tight:  1.15;
    --lh-snug:   1.3;
    --lh-normal: 1.6;
    --lh-loose:  1.8;

    --ls-tight:  -0.03em;
    --ls-normal:  0;
    --ls-wide:    0.08em;
    --ls-ultra:   0.16em;

    /* ── Spacing Scale ───────────────────────────────── */
    --sp-1:  0.25rem;
    --sp-2:  0.5rem;
    --sp-3:  0.75rem;
    --sp-4:  1rem;
    --sp-5:  1.25rem;
    --sp-6:  1.5rem;
    --sp-8:  2rem;
    --sp-10: 2.5rem;
    --sp-12: 3rem;
    --sp-16: 4rem;
    --sp-20: 5rem;
    --sp-24: 6rem;

    /* ── Radius ──────────────────────────────────────── */
    --r-sm:   6px;
    --r-md:   10px;
    --r-lg:   14px;
    --r-xl:   20px;
    --r-2xl:  28px;
    --r-full: 9999px;

    /* ── Transitions ─────────────────────────────────── */
    --ease:     cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --dur-fast: 0.15s;
    --dur:      0.25s;
    --dur-slow: 0.5s;

    /* ── Shadows ─────────────────────────────────────── */
    --shadow-sm:  0 1px 2px rgba(0,0,0,0.06);
    --shadow-md:  0 2px 8px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-lg:  0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
    --shadow-xl:  0 20px 60px rgba(0,0,0,0.18), 0 4px 16px rgba(0,0,0,0.08);
    --shadow-glow: 0 0 40px rgba(26,58,42,0.15);

    /* ── Layout ──────────────────────────────────────── */
    --max-w:     960px;
    --max-w-lg:  1200px;
    --max-w-xl:  1400px;
    --header-h:  68px;
}

/* ═══════════════════════════════════════════════════════════════
   DARK MODE (default)
═══════════════════════════════════════════════════════════════ */
[data-theme="dark"], :root {
    --bg-0:      #060a08;      /* Deepest background */
    --bg-1:      #0c1210;      /* Page background */
    --bg-2:      #131c17;      /* Card / surface */
    --bg-3:      #1a2820;      /* Elevated surface */
    --bg-4:      #22352a;      /* Hover state */
    --bg-glass:  rgba(19,28,23,0.75);

    --bdr-0:     rgba(255,255,255,0.04);
    --bdr-1:     rgba(255,255,255,0.08);
    --bdr-2:     rgba(255,255,255,0.12);
    --bdr-3:     rgba(255,255,255,0.18);

    --txt-0:     #ffffff;                /* Primary text */
    --txt-1:     rgba(255,255,255,0.85); /* Body text */
    --txt-2:     rgba(255,255,255,0.55); /* Muted */
    --txt-3:     rgba(255,255,255,0.30); /* Disabled / hints */

    /* ── Brand Accent ── */
    --accent:    #2a6b42;      /* Grillo green — primary */
    --accent-h:  #347d4f;      /* Hover */
    --accent-a:  #1e5433;      /* Active */
    --accent-bg: rgba(42,107,66,0.10);
    --accent-bdr: rgba(42,107,66,0.25);

    --gold:      #d4a520;      /* Grillo gold — highlight */
    --gold-dim:  #a17f18;
    --gold-bg:   rgba(212,165,32,0.08);
    --gold-bdr:  rgba(212,165,32,0.20);

    --red:       #e04848;
    --red-bg:    rgba(224,72,72,0.08);
    --green-ok:  #34d058;
    --green-bg:  rgba(52,208,88,0.08);

    --input-bg:  #111a15;
    --input-bdr: rgba(255,255,255,0.10);
    --input-focus: var(--accent);

    --overlay:   rgba(0,0,0,0.60);
    --blur:      12px;
}

/* ═══════════════════════════════════════════════════════════════
   LIGHT MODE
═══════════════════════════════════════════════════════════════ */
[data-theme="light"] {
    --bg-0:      #f0ede8;
    --bg-1:      #f7f5f0;
    --bg-2:      #ffffff;
    --bg-3:      #f5f3ee;
    --bg-4:      #eae7e0;
    --bg-glass:  rgba(255,255,255,0.80);

    --bdr-0:     rgba(0,0,0,0.04);
    --bdr-1:     rgba(0,0,0,0.08);
    --bdr-2:     rgba(0,0,0,0.12);
    --bdr-3:     rgba(0,0,0,0.18);

    --txt-0:     #0c1210;
    --txt-1:     #2a3530;
    --txt-2:     #6b7770;
    --txt-3:     #a0a89e;

    --accent:    #1a5a34;
    --accent-h:  #1e6b3e;
    --accent-a:  #154a2b;
    --accent-bg: rgba(26,90,52,0.06);
    --accent-bdr: rgba(26,90,52,0.18);

    --gold:      #b8860b;
    --gold-dim:  #9a7209;
    --gold-bg:   rgba(184,134,11,0.06);
    --gold-bdr:  rgba(184,134,11,0.16);

    --red:       #c0392b;
    --red-bg:    rgba(192,57,43,0.06);
    --green-ok:  #1a6b3a;
    --green-bg:  rgba(26,107,58,0.06);

    --input-bg:  #f7f5f0;
    --input-bdr: rgba(0,0,0,0.12);
    --input-focus: var(--accent);

    --overlay:   rgba(0,0,0,0.35);
    --blur:      8px;

    --shadow-sm:  0 1px 3px rgba(0,0,0,0.04);
    --shadow-md:  0 2px 8px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.03);
    --shadow-lg:  0 8px 30px rgba(0,0,0,0.07), 0 2px 6px rgba(0,0,0,0.03);
    --shadow-xl:  0 16px 48px rgba(0,0,0,0.10), 0 4px 12px rgba(0,0,0,0.04);
}