/* ============================================================== */
    /* MASTER APPROVED DESIGN SYSTEM TOKENS                           */
    /* Hybrid Editorial Engine: Fraunces Letters + Jakarta Numerals   */
    /* ============================================================== */
    @font-face {
      font-family: 'CanopySansNumerals';
      font-style: normal;
      font-weight: 500 700;
      font-display: swap;
      src: local('Plus Jakarta Sans'),
           url(https://fonts.gstatic.com/s/plusjakartasans/v12/LDIoaomQNQcsA88c7O9yZ4KMCoOg4Ko20yygg_vb.woff2) format('woff2');
      unicode-range: U+0030-0039, U+0025, U+00B0, U+002B, U+2212;
    }

    :root, [data-theme="sage"] {
      --bg: #DCE8DF;
      --header-bg: rgba(220, 232, 223, 0.95);
      --dock-bg: rgba(226, 237, 229, 0.97);

      --card-bg: #F1F7F3;
      --card-inner: #E3EFE7;
      --card-border: #B8D0C0;
      --card-border-subtle: #CBE0D2;

      --hero-box-bg: linear-gradient(150deg, #11532F 0%, #0B3A20 100%);
      --hero-box-border: #1E6E40;
      --hero-box-shadow: 0 8px 26px rgba(17, 83, 47, 0.32);
      --hero-box-text: #FFFFFF;
      --hero-box-muted: #B3D8C1;
      --hero-ring-glow: #34D399;

      --epic-box-bg: linear-gradient(150deg, #0F4A2A 0%, #082E19 100%);
      --epic-box-border: #196138;
      --epic-box-shadow: 0 8px 24px rgba(15, 74, 42, 0.28);

      --text-primary: #0D2416;     /* Deep Pine Noir */
      --text-secondary: #3B5846;   /* Eucalyptus Slate */
      --text-accent: #15803D;      /* Emerald Green */

      --urgent-red: #B91C1C;
      --urgent-bg: #FEF2F2;
      --urgent-border: #FECACA;

      --shared-blue: #0284C7;
      --shared-blue-bg: #F0F9FF;
      --shared-blue-border: #BAE6FD;
      --shared-blue-text: #0369A1;

      --btn-accent-bg: #15803D;
      --btn-accent-border: #15803D;
      --btn-accent-text: #FFFFFF;

      --timeline-healthy: #15803D;
      --timeline-monitor: #C27803;
      --timeline-sick: #B91C1C;
      --timeline-water: #2563EB;
      --timeline-event: #0D2416;
      --timeline-mist-healthy: rgba(21, 128, 61, 0.14);
      --timeline-mist-monitor: rgba(194, 120, 3, 0.14);
      --timeline-mist-sick: rgba(185, 28, 28, 0.16);
      --timeline-grid: #D2E3D8;

      --status-monitor: #D97706;
      --status-sick: #EA580C;
      --aura-strength: 15%;
      --rim-strength: 48%;
      --card-specular-rim: inset 0 1px 0 rgba(255, 255, 255, 0.85);
      --card-ambient-shadow: 0 8px 20px -4px rgba(13, 36, 22, 0.06), 0 2px 6px -1px rgba(13, 36, 22, 0.04);

      --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      --font-mono: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      --font-serif: 'CanopySansNumerals', 'Fraunces', Georgia, serif;
    }

    [data-theme="dark"] {
      --bg: #070B08;
      --header-bg: rgba(7, 11, 8, 0.95);
      --dock-bg: rgba(11, 20, 15, 0.97);

      --card-bg: #101D16;
      --card-inner: #0B150F;
      --card-border: #223D2E;
      --card-border-subtle: #182C21;

      --hero-box-bg: linear-gradient(150deg, #0C2E1A 0%, #051A0E 100%);
      --hero-box-border: #1D5432;
      --hero-box-shadow: 0 8px 26px rgba(0, 0, 0, 0.5);
      --hero-box-text: #C8D2CB;
      --hero-box-muted: #8AA294;
      --hero-ring-glow: #34D399;

      --epic-box-bg: linear-gradient(150deg, #0B1A12 0%, #06100B 100%);
      --epic-box-border: #193826;
      --epic-box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);

      --text-primary: #C8D2CB;
      --text-secondary: #8AA294;
      --text-accent: #34D399;

      --urgent-red: #EF4444;
      --urgent-bg: #450A0A;
      --urgent-border: #7F1D1D;

      --shared-blue: #38BDF8;
      --shared-blue-bg: #0C2A3E;
      --shared-blue-border: #0369A1;
      --shared-blue-text: #7DD3FC;

      --btn-accent-bg: #166534;
      --btn-accent-border: #166534;
      --btn-accent-text: #FFFFFF;

      --timeline-healthy: #34D399;
      --timeline-monitor: #FBBF24;
      --timeline-sick: #F87171;
      --timeline-water: #38BDF8;
      --timeline-event: #0D9488;
      --timeline-mist-healthy: rgba(52, 211, 153, 0.18);
      --timeline-mist-monitor: rgba(251, 191, 36, 0.18);
      --timeline-mist-sick: rgba(248, 113, 113, 0.22);
      --timeline-grid: rgba(255, 255, 255, 0.08);

      --status-monitor: #FBBF24;
      --status-sick: #FB923C;
      --aura-strength: 20%;
      --rim-strength: 52%;
      --card-specular-rim: inset 0 1px 0 rgba(255, 255, 255, 0.09);
      --card-ambient-shadow: 0 10px 24px -4px rgba(0, 0, 0, 0.45), 0 3px 8px -2px rgba(0, 0, 0, 0.32);
    }

    [data-theme="white"] {
      --bg: #F4F7F5;
      --header-bg: rgba(244, 247, 245, 0.95);
      --dock-bg: rgba(244, 247, 245, 0.97);

      --card-bg: #FFFFFF;
      --card-inner: #EDF3EF;
      --card-border: #D8E4DC;
      --card-border-subtle: #E4ECE6;

      --hero-box-bg: #FFFFFF;
      --hero-box-border: #D8E4DC;
      --hero-box-shadow: 0 4px 20px rgba(13, 36, 22, 0.06);
      --hero-box-text: #0D2416;
      --hero-box-muted: #3B5846;
      --hero-ring-glow: #15803D;

      --epic-box-bg: #FFFFFF;
      --epic-box-border: #D8E4DC;
      --epic-box-shadow: 0 4px 20px rgba(13, 36, 22, 0.05);

      --text-primary: #0D2416;
      --text-secondary: #3B5846;
      --text-accent: #15803D;

      --urgent-red: #B91C1C;
      --urgent-bg: #FEF2F2;
      --urgent-border: #FECACA;

      --shared-blue: #0284C7;
      --shared-blue-bg: #F0F9FF;
      --shared-blue-border: #BAE6FD;
      --shared-blue-text: #0369A1;

      --btn-accent-bg: #15803D;
      --btn-accent-border: #15803D;
      --btn-accent-text: #FFFFFF;

      --timeline-healthy: #15803D;
      --timeline-monitor: #D97706;
      --timeline-sick: #B91C1C;
      --timeline-water: #2563EB;
      --timeline-event: #0D2416;
      --timeline-mist-healthy: rgba(21, 128, 61, 0.11);
      --timeline-mist-monitor: rgba(217, 119, 6, 0.12);
      --timeline-mist-sick: rgba(185, 28, 28, 0.14);
      --timeline-grid: #E2ECE6;

      --status-monitor: #D97706;
      --status-sick: #EA580C;
      --aura-strength: 13%;
      --rim-strength: 45%;
      --card-specular-rim: inset 0 1px 0 rgba(255, 255, 255, 0.95);
      --card-ambient-shadow: 0 8px 22px -4px rgba(13, 36, 22, 0.055), 0 2px 6px -1px rgba(13, 36, 22, 0.035);
    }

    /* Universal Self-Healing Aliases, Composable Surface Physics & Typography System */
    :root, [data-theme="sage"], [data-theme="dark"], [data-theme="white"] {
      --text: var(--text-primary);
      --text-muted: var(--text-secondary);
      --accent-green: var(--text-accent);
      --accent-teal: var(--card-inner);

      /* High-Contrast Frosted Photo Overlay Pills (Never dark text over photo) */
      --glass-pill-bg: rgba(13, 36, 22, 0.64);
      --glass-pill-border: rgba(255, 255, 255, 0.28);
      --glass-pill-text: #F0FDF4;
      --glass-pill-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26), 0 4px 12px rgba(0, 0, 0, 0.24);

      /* Composable Architectural Surface & Corner Aura System */
      --card-elevation: var(--card-specular-rim), var(--card-ambient-shadow);
      --aura-none: linear-gradient(transparent, transparent);

      --aura-urgent: radial-gradient(150px circle at 0% 0%, color-mix(in srgb, var(--urgent-red) var(--aura-strength), transparent), transparent 72%);
      --rim-urgent: color-mix(in srgb, var(--urgent-red) var(--rim-strength), var(--card-border));

      --aura-monitor: radial-gradient(150px circle at 0% 0%, color-mix(in srgb, var(--status-monitor) var(--aura-strength), transparent), transparent 72%);
      --rim-monitor: color-mix(in srgb, var(--status-monitor) var(--rim-strength), var(--card-border));

      --aura-sick: radial-gradient(150px circle at 0% 0%, color-mix(in srgb, var(--status-sick) var(--aura-strength), transparent), transparent 72%);
      --rim-sick: color-mix(in srgb, var(--status-sick) var(--rim-strength), var(--card-border));

      --aura-shared: radial-gradient(150px circle at 100% 0%, color-mix(in srgb, var(--shared-blue) var(--aura-strength), transparent), transparent 72%);
      --rim-shared: color-mix(in srgb, var(--shared-blue) var(--rim-strength), var(--card-border));

      --safe-top: max(56px, calc(env(safe-area-inset-top, 0px) + 16px));
      --safe-bottom: max(20px, env(safe-area-inset-bottom, 20px));

      /* Master Role-Based Font Size Scale (Single Source of Truth) */
      --fs-2xs: 9.5px;     /* Micro / Graph Axis / Bottom Tabs */
      --fs-xs: 11px;       /* All Buttons / Pills / Badges / Section Headers */
      --fs-sm: 12.5px;     /* Body / Subtitles / Descriptions */
      --fs-base: 14px;     /* Row Title / Stat Value / Inputs */
      --fs-species: 14.5px;/* Botanical Species Subtitle (Cormorant Italic) */
      --fs-md: 16px;       /* Plant Card Title */
      --fs-lg: 17px;       /* Room / Section Card Title */
      --fs-xl: 24px;       /* Page Title / Greeting */

      /* Master 2-Tier Font Weight Scale */
      --fw-medium: 500;
      --fw-bold: 700;

      /* Spring Choreography & Motion Physics Tokens */
      --spring-sheet: cubic-bezier(0.22, 1, 0.36, 1);
      --spring-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
      --spring-smooth: cubic-bezier(0.16, 1, 0.3, 1);
      --stagger-step: 25ms;
    }

    /* ============================================================== */
    /* MASTER EDITORIAL TYPOGRAPHIC SYSTEM (ROOT TOKEN ARCHITECTURE)  */
    /* 1. Fraunces (600) -> All Headings, Titles, .t-headline & Stats */
    /* 2. Plus Jakarta Sans (500, 700) -> Subtitles, Pills, Controls  */
    /* ============================================================== */
    .t-micro       { font-size: var(--fs-2xs);  font-weight: var(--fw-bold);   letter-spacing: 0.05em; }
    .t-micro-med   { font-size: var(--fs-2xs);  font-weight: var(--fw-medium); }
    .t-caption     { font-size: var(--fs-xs);   font-weight: var(--fw-bold); }
    .t-caption-med { font-size: var(--fs-xs);   font-weight: var(--fw-medium); }
    .t-subhead     { font-size: var(--fs-sm);   font-weight: var(--fw-medium); }
    .t-subhead-bold{ font-size: var(--fs-sm);   font-weight: var(--fw-bold);   font-variant-numeric: tabular-nums; }
    .t-body        { font-size: var(--fs-base); font-weight: var(--fw-medium); }
    .t-headline    { font-family: var(--font-serif) !important; font-size: var(--fs-base); font-weight: 600 !important; letter-spacing: -0.02em !important; font-variant-numeric: tabular-nums; }
    .t-title-md    { font-family: var(--font-serif) !important; font-size: var(--fs-md);   font-weight: 600 !important; letter-spacing: -0.02em !important; }
    .t-title-md-med{ font-size: var(--fs-md);   font-weight: var(--fw-medium); }
    .t-title-lg    { font-family: var(--font-serif) !important; font-size: var(--fs-lg);   font-weight: 600 !important; letter-spacing: -0.02em !important; font-variant-numeric: tabular-nums; }
    .t-title-xl    { font-family: var(--font-serif) !important; font-size: var(--fs-xl);   font-weight: 600 !important; letter-spacing: -0.025em !important; }

    /* Keep form inputs, buttons, and uppercase pill labels in clean Plus Jakarta Sans even if .t-headline is attached */
    input.t-headline,
    button.t-headline,
    select.t-headline,
    textarea.t-headline,
    a.t-headline,
    .t-headline.t-tabular,
    .t-headline.t-upper {
      font-family: var(--font-sans) !important;
      font-weight: var(--fw-bold) !important;
      letter-spacing: 0 !important;
    }

    .t-fw-bold     { font-weight: var(--fw-bold); }
    .t-fw-med      { font-weight: var(--fw-medium); }
    .t-tabular     { font-family: var(--font-sans) !important; font-variant-numeric: tabular-nums; }
    .t-upper       { text-transform: uppercase; letter-spacing: 0.05em; }
    .t-cap         { text-transform: capitalize; }
    .t-italic      { font-style: italic; }

    /* Primary Sculpted Editorial Titles (Fraunces 600 App-Wide — Text Headings Only) */
    h1,
    h2,
    h3,
    .drawer-header h2,
    .brand-title,
    #home-greeting-text,
    #home-hero-head,
    .dial-status-head,
    .epic-main-title,
    .room-name-lbl,
    .entry-title,
    .visual-picker-selected-title,
    .tag-option-title,
    .wizard-species-name,
    .hydration-status-title,
    .light-title,
    .notes-title,
    .lifeline-card-title,
    .plants-room-group-header,
    .action-sheet-title,
    .canvas-heading h1,
    .specimen-name,
    .apartment-name,
    .estate-page-title,
    .room-block-title,
    #detail-name,
    .modal-title,
    svg text.tl-node-title {
      font-family: var(--font-serif) !important;
      font-weight: 600 !important;
      letter-spacing: -0.02em !important;
      font-variant-numeric: tabular-nums;
    }

    svg text.tl-node-title {
      font-size: 11px !important;
    }

    /* Botanical Taxonomy Subtitles & All Numerals / Telemetry / Counters (Clean Plus Jakarta Sans) */
    .t-species,
    .specimen-detail-species,
    #detail-species,
    .specimen-meta {
      font-family: var(--font-sans) !important;
      font-style: normal !important;
      font-weight: var(--fw-medium) !important;
      letter-spacing: 0 !important;
    }
    .dial-center-val,
    #home-vitality-pct,
    .hero-stat-val,
    #home-stat-urgent,
    #home-stat-soon,
    #home-stat-hydrated,
    .epic-stat-val,
    .stat-pod-val,
    #detail-hydration-status-pct,
    .specimen-tally,
    #properties-tally-badge,
    #plants-tally-badge,
    #home-action-rooms-tally,
    .ring-center-text,
    .light-val-badge,
    .photo-duration-badge,
    .room-single-telemetry,
    .weather-pill,
    .hydration-status-labels span,
    .hydration-status-countdown,
    .climate-pill,
    .microclimate-badge,
    svg text,
    svg text.tl-mono {
      font-family: var(--font-sans) !important;
      font-variant-numeric: tabular-nums;
    }
    .specimen-meta {
      font-size: var(--fs-sm) !important;
      line-height: 1.25 !important;
    }
    .specimen-detail-species,
    #detail-species {
      font-size: var(--fs-base) !important;
      line-height: 1.25 !important;
    }