/* RubanTea - design tokens. No rules here, only custom properties.
   Section 1: tea brand palette + semantic role tokens (extracted from tea.css).
   Section 2: RPS canonical aliases so cross-platform code uses --color-* names. */

:root {
    /* ── Brand palette (constant across themes) ── */
    --green-900: #1b3a1e;
    --green-700: #1b5e20;
    --green-600: #2e7d32;
    --green-100: #e8f5e9;
    --leaf-accent: #8bc34a;

    /* ── Semantic role tokens (flip in dark mode) ── */
    --surface:    #ffffff;
    --surface-2:  #f4f7f4;
    --surface-3:  #eef3ee;
    --border:     #dde5dd;
    --text:       #1f2421;
    --text-muted: #525c53;
    --heading:    #1b3a1e;
    --green-text: #1b5e20;
    --danger:     #c62828;
    --danger-bg:  #fdecea;

    /* Legacy aliases (existing rules reference these unchanged) */
    --ink:  var(--text);
    --muted: var(--text-muted);
    --bg:   var(--surface-2);
    --card: var(--surface);
    --line: var(--border);

    /* ── Type scale ── */
    --fs-xs: .78rem;  --fs-sm: .88rem;   --fs-md: 1rem;
    --fs-lg: 1.18rem; --fs-xl: 1.5rem;   --fs-2xl: 2rem;
    --fw-normal: 400; --fw-medium: 500;   --fw-semibold: 600; --fw-bold: 700;

    /* ── Spacing scale (4px base) ── */
    --space-1: 4px;  --space-2: 8px;   --space-3: 12px;
    --space-4: 16px; --space-5: 24px;  --space-6: 32px;
    --space-7: 48px; --space-8: 64px;

    /* ── Radii + elevation ── */
    --r-sm: 8px;  --r-md: 12px;  --r-lg: 16px;
    --radius-sm: var(--r-sm);
    --radius-md: var(--r-md);
    --radius-lg: var(--r-lg);
    --radius-full: 9999px;
    --shadow-sm: 0 1px 2px rgba(27, 58, 30, .08);
    --shadow-md: 0 2px 8px rgba(27, 58, 30, .10);
    --shadow-lg: 0 8px 24px rgba(27, 58, 30, .14);
    --radius: var(--r-md);
    --shadow: var(--shadow-md);

    /* ── Layout ── */
    --shell-max:   800px;
    --topbar-h:    56px;
    --bottomnav-h: 60px;

    /* ── RPS canonical aliases (cross-platform standard names) ── */
    --color-primary:  var(--green-700);
    --color-danger:   var(--danger);
    --color-warning:  #d97706;
    --color-info:     #2563eb;
    --color-success:  var(--green-600);
    --color-text:     var(--text);
    --color-muted:    var(--text-muted);
    --color-border:   var(--border);
    --color-surface:  var(--surface);
    --color-bg:       var(--surface-2);

    /* ── RS Design-System Scale Layer (2026-06-18)
       Naming aliases so rubansoftwares.com canonical names resolve here.
       Additive — no existing rule is changed.
       Brand: green (#1b5e20) — intentional tea industry identity.     */

    /* Spacing aliases (main-site names → existing space-1..8 values) */
    --space-xs:  var(--space-1);   /*  4px */
    --space-sm:  var(--space-2);   /*  8px */
    --space-md:  var(--space-4);   /* 16px */
    --space-lg:  var(--space-5);   /* 24px */
    --space-xl:  2.5rem;           /* 40px */
    --space-2xl: var(--space-8);   /* 64px */

    /* Radius aliases (missing entries; --radius-sm/md/lg already via --r-* above) */
    --radius-xl:   24px;
    --radius-pill: 50px;

    /* Typography scale — fluid, responsive via clamp() */
    --text-display: clamp(2.4rem, 5vw,  3.6rem);
    --text-h1:      clamp(2rem,   4vw,  2.8rem);
    --text-h2:      clamp(1.6rem, 3vw,  2.2rem);
    --text-h3:      clamp(1.3rem, 2.2vw, 1.7rem);
    --text-h4:      clamp(1.1rem, 1.6vw, 1.3rem);
    --text-h5:      1.1rem;
    --text-lg:      1.125rem;
    --text-body:    1rem;
    --text-sm:      0.875rem;
    --text-caption: 0.78rem;

    /* Line-heights */
    --leading-tight:   1.2;
    --leading-snug:    1.4;
    --leading-normal:  1.6;
    --leading-relaxed: 1.8;
}

/* ── Dark theme ── */
[data-theme="dark"] {
    --surface:    #1a211b;
    --surface-2:  #11150f;
    --surface-3:  #232b24;
    --border:     #2c352d;
    --text:       #e6ece6;
    --text-muted: #a6b6a8;
    --heading:    #eaf2ea;
    --green-text: #5cba63;
    --green-100:  #1d2a1f;
    --danger:     #ff7a7a;
    --danger-bg:  #2e1c1c;

    --color-text:    #e6ece6;
    --color-muted:   #a6b6a8;
    --color-surface: #1a211b;
    --color-bg:      #11150f;
    --color-border:  #2c352d;

    --bg:   var(--surface-2);
    --card: var(--surface);
    --line: var(--border);
    --ink:  var(--text);
    --muted: var(--text-muted);
}