/* css/1-base.css */
/* 
 * DESIGN TOKEN SYSTEM - Single Source of Truth
 * 
 * This file contains ALL design tokens (colors, spacing, radius, shadows).
 * All other CSS files MUST use these tokens via var() - NO hard-coded values allowed.
 * 
 * TYPOGRAPHY STYLE GUIDE:
 * - UI labels, headers, tabs, and buttons use LOWERCASE text for a modern aesthetic
 * - Only uppercase badges (PRO, OFFICIAL) and brand names use text-transform: uppercase
 * - Use --letter-spacing-ui (0.02em) for lowercase UI text
 * - Use --letter-spacing-badge (0.5px) for uppercase badge text
 * - Prefer font-weight: 600 (semibold) for headers; 700 reserved for emphasis/badges
 */

/* ========================================================================== */
/* DESIGN TOKENS - Centralized design system variables */
/* ========================================================================== */

:root {
    /* ─────────────────────────────────────────────────────────────────── */
    /* Layout - Global Dimensions */
    /* ─────────────────────────────────────────────────────────────────── */
    --app-header-height: 45px;
    --yrh-responsive-phone-max-width: 459.98px;
    --yrh-responsive-desktop-min-width: 1280px;
    --yrh-shell-header-height: 58px;
    --yrh-shell-inline-gutter: 24px;
    --yrh-sidebar-width: 400px;
    --yrh-auth-panel-max-width: 550px;
    --yrh-primary-modal-width: min(920px, calc(100vw - 64px));
    --yrh-secondary-modal-width: min(720px, calc(100vw - 64px));
    --yrh-primary-modal-height: min(760px, calc(100dvh - (64px + env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px))));
    --yrh-centered-modal-height: min(640px, calc(100dvh - (80px + env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px))));

    /* Bottom navigation icon size (desktop default; iPhone overrides in css/8-iphone.css) */
    --bnav-icon-size: 22px;

    /* ─────────────────────────────────────────────────────────────────── */
    /* Apple List & Modal System (canonical) */
    /* ─────────────────────────────────────────────────────────────────── */
    /* Modal sizing (desktop) */
    --yrh-apple-modal-width: 620px;
    --yrh-apple-modal-max-width: 680px;

    /* List row layout */
    --yrh-apple-list-padding-x: 20px;
    --yrh-apple-row-padding-y: 11px;
    --yrh-apple-row-gap: 12px;
    --yrh-apple-avatar-size: 40px;

    /* Separators + interaction */
    --yrh-apple-separator-color: rgba(0, 0, 0, 0.14);
    --yrh-apple-row-hover-bg: rgba(0, 0, 0, 0.04);
    --yrh-apple-row-active-bg: rgba(0, 0, 0, 0.10);

    /* Typography hierarchy */
    --yrh-apple-secondary-opacity: 0.62;
    --yrh-apple-section-header-opacity: 0.58;

    /* ─────────────────────────────────────────────────────────────────── */
    /* Scrollbars (canonical: match timeline picker) */
    /* ─────────────────────────────────────────────────────────────────── */
    --yrh-scrollbar-size: 10px;
    --yrh-scrollbar-track: transparent;
    --yrh-scrollbar-thumb: rgba(0, 0, 0, 0.28);
    --yrh-scrollbar-thumb-hover: rgba(0, 0, 0, 0.38);
    --yrh-scrollbar-thumb-radius: 10px;
    --yrh-scrollbar-thumb-border: 2px;
    
    /* ─────────────────────────────────────────────────────────────────── */
    /* Colors - Brand & Primary */
    /* ─────────────────────────────────────────────────────────────────── */
    --color-primary: #667eea;
    --color-brand-primary: var(--color-primary); /* Semantic alias */
    --color-primary-dark: #764ba2;
    --color-primary-gradient-start: #667eea;
    --color-primary-gradient-end: #764ba2;
    
    /* Brand color opacity variants */
    --color-brand-primary-05: rgba(102, 126, 234, 0.05);
    --color-brand-primary-08: rgba(102, 126, 234, 0.08);
    --color-brand-primary-10: rgba(102, 126, 234, 0.1);
    --color-brand-primary-15: rgba(102, 126, 234, 0.15);
    --color-brand-primary-20: rgba(102, 126, 234, 0.2);
    --color-brand-primary-30: rgba(102, 126, 234, 0.3);
    
    /* Colors - Premium / Accent Gradient */
    --color-premium-gradient-start: #f093fb;
    --color-premium-gradient-end: #f5576c;
    
    /* ─────────────────────────────────────────────────────────────────── */
    /* Colors - Text */
    /* ─────────────────────────────────────────────────────────────────── */
    --color-text-primary: #333;       /* Body text, headings */
    --color-text-secondary: #666;     /* Secondary labels, metadata */
    --color-text-tertiary: #999;      /* Placeholders, disabled */
    --color-text-muted: #555;         /* De-emphasized text */
    --color-text-inverse: #fff;       /* Text on dark backgrounds */
    --color-text-light: #999;         /* Deprecated: use --color-text-tertiary */
    --color-text-lighter: #aaa;
    --color-text-on-brand: white;
    
    /* ─────────────────────────────────────────────────────────────────── */
    /* Colors - Backgrounds & Surfaces */
    /* ─────────────────────────────────────────────────────────────────── */
    --color-bg-primary: white;
    --color-bg-secondary: #f9f9f9;
    --color-bg-tertiary: #f5f5f5;
    --color-bg-overlay: rgba(0, 0, 0, 0.65);
    
    /* Surface colors (semantic naming) */
    --color-surface-1: #ffffff;       /* Pure white (cards, modals) */
    --color-surface-2: #f9f9f9;       /* Light gray backgrounds */
    --color-surface-3: #f5f5f5;       /* Off-white surfaces */
    --color-surface-4: #f0f0f0;       /* Subtle gray backgrounds */
    --color-surface-paper-warm: #fbf7ee;
    
    /* ─────────────────────────────────────────────────────────────────── */
    /* Colors - Borders */
    /* ─────────────────────────────────────────────────────────────────── */
    --color-border-light: #ddd;       /* Standard borders */
    --color-border-lighter: #e0e0e0;  /* Subtle borders */
    --color-border-lightest: #eee;    /* Very light borders */
    --color-border-dark: #bbb;        /* Darker borders */
    --color-border-medium: #d0d0d0;   /* Medium borders */
    --color-border-gray: #ccc;        /* Neutral gray borders */
    
    /* ─────────────────────────────────────────────────────────────────── */
    /* Colors - Status & Semantic */
    /* ─────────────────────────────────────────────────────────────────── */
    --color-status-error: #e74c3c;
    --color-status-error-bg: #ffe6e6;
    --color-status-success: #27ae60;
    --color-status-success-bg: #e8f5e9;
    --color-status-danger: #ef4444;
    
    /* Legacy status colors */
    --color-danger: #f44336;
    --color-success: #4CAF50;
    --color-warning: #ff9800;
    --color-info: #2196F3;
    
    /* Alert backgrounds (plan-specific) */
    --color-alert-error-bg-light: #fde8e8;
    --color-alert-error-bg: #fbdcdc;
    --color-alert-info-bg: #f0f4ff;
    --color-alert-warning-bg: #fff3cd;
    
    /* Badge backgrounds */
    --color-badge-owner-bg: #ffe0e0;
    --color-badge-info-bg: #e3f2fd;
    --color-badge-error-bg: #ffebee;
    
    /* Timeline colors (purple variants) */
    --color-timeline-purple-1: #7b6bc0;  /* Medium purple */
    --color-timeline-purple-2: #8977c9;  /* Light purple */
    --color-timeline-purple-3: #4a3682;  /* Dark purple */
    --color-timeline-purple-4: #6b5ba8;  /* Purple border */
    --color-timeline-purple-5: #9d8dd6;  /* Very light purple */
    --color-timeline-purple-6: #ab9de0;  /* Pale purple */
    --color-timeline-muted-start: #a8b5d1;  /* Gray-blue gradient start */
    --color-timeline-muted-end: #9fa8c4;    /* Gray-blue gradient end */
    
    /* ─────────────────────────────────────────────────────────────────── */
    /* Colors - UI States */
    /* ─────────────────────────────────────────────────────────────────── */
    --color-disabled: #999;
    --color-disabled-bg: #f0f0f0;
    
    /* ─────────────────────────────────────────────────────────────────── */
    /* Colors - Overlays */
    /* ─────────────────────────────────────────────────────────────────── */
    --color-overlay-dark-05: rgba(0, 0, 0, 0.05);
    --color-overlay-dark-08: rgba(0, 0, 0, 0.08);
    --color-overlay-dark-10: rgba(0, 0, 0, 0.1);
    --color-overlay-dark-12: rgba(0, 0, 0, 0.12);
    --color-overlay-dark-15: rgba(0, 0, 0, 0.15);
    --color-overlay-dark-20: rgba(0, 0, 0, 0.2);
    --color-overlay-dark-30: rgba(0, 0, 0, 0.3);
    --color-overlay-light-50: rgba(255, 255, 255, 0.5);
    --color-overlay-light-96: rgba(255, 255, 255, 0.96);
    
    /* ─────────────────────────────────────────────────────────────────── */
    /* Typography */
    /* ─────────────────────────────────────────────────────────────────── */
    --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.9rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.1rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    
    --font-weight-normal: 400;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    --letter-spacing-normal: 0;
    --letter-spacing-ui: 0.02em;
    --letter-spacing-badge: 0.5px;
    
    /* ─────────────────────────────────────────────────────────────────── */
    /* Spacing Scale */
    /* Preserves exact values from current usage - NOT normalized to grid */
    /* ─────────────────────────────────────────────────────────────────── */
    --spacing-2: 2px;
    --spacing-3: 3px;
    --spacing-4: 4px;
    --spacing-5: 5px;
    --spacing-6: 6px;
    --spacing-8: 8px;
    --spacing-10: 10px;
    --spacing-12: 12px;
    --spacing-14: 14px;
    
    /* Input component padding */
    --padding-input: var(--spacing-10) var(--spacing-12); /* 10px 12px */
    --spacing-15: 15px;
    --spacing-16: 16px;
    --spacing-20: 20px;
    --spacing-25: 25px;
    --spacing-30: 30px;
    --spacing-40: 40px;
    
    /* Legacy aliases for backward compatibility */
    --spacing-xs: var(--spacing-4);
    --spacing-sm: var(--spacing-8);
    --spacing-md: var(--spacing-12);
    --spacing-lg: var(--spacing-16);
    --spacing-xl: var(--spacing-20);
    --spacing-2xl: var(--spacing-25);
    
    /* ─────────────────────────────────────────────────────────────────── */
    /* Border Radius */
    /* ─────────────────────────────────────────────────────────────────── */
    --radius-sm: 4px;          /* Subtle rounding */
    --radius-md: 6px;          /* Small elements */
    --radius-default: 8px;     /* Default cards/buttons */
    --radius-lg: 10px;         /* Modal corners */
    --radius-xl: 12px;         /* Large cards */
    --radius-2xl: 20px;        /* Pills, rounded buttons */
    --radius-pill: 999px;      /* Pill-shaped */
    --radius-circle: 50%;      /* Circular avatars, badges */
    --radius-full: 50%;        /* Alias for --radius-circle */
    
    /* Legacy aliases */
    --radius-xs: var(--radius-sm);
    
    /* ─────────────────────────────────────────────────────────────────── */
    /* Shadows */
    /* ─────────────────────────────────────────────────────────────────── */
    --shadow-xs: 0 1px 3px var(--color-overlay-dark-10);
    --shadow-sm: 0 2px 6px var(--color-overlay-dark-10);      /* Card elevation */
    --shadow-md: 0 4px 12px var(--color-overlay-dark-10);     /* Modal shadows */
    --shadow-lg: 0 4px 12px var(--color-overlay-dark-15);     /* Medium elevation */
    --shadow-xl: 0 10px 40px var(--color-overlay-dark-30);    /* Lightbox */
    --shadow-photo-print: 0 8px 24px var(--color-overlay-dark-12);
    --shadow-focus: 0 0 0 3px var(--color-brand-primary-20);  /* Focus rings */
    --shadow-focus-error: 0 0 0 3px rgba(244, 67, 54, 0.3);   /* Error focus */
    
    /* Brand-colored shadows */
    --shadow-primary-sm: 0 2px 8px rgba(102, 126, 234, 0.15);
    --shadow-primary-md: 0 5px 15px rgba(102, 126, 234, 0.3);
    --shadow-primary-lg: 0 5px 15px rgba(102, 126, 234, 0.4);
    
    /* ─────────────────────────────────────────────────────────────────── */
    /* Transitions & Animations */
    /* ─────────────────────────────────────────────────────────────────── */
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;
    
    /* ─────────────────────────────────────────────────────────────────── */
    /* Z-Index Scale */
    /* ─────────────────────────────────────────────────────────────────── */
    --z-base: 1;
    --z-dropdown: 5;
    --z-overlay: 10;
    --z-modal: 1000;
    --z-modal-overlay: 1010;
    --z-modal-content: 1020;
    
    /* ─────────────────────────────────────────────────────────────────── */
    /* Gradients - Predefined */
    /* ─────────────────────────────────────────────────────────────────── */
    --gradient-primary: linear-gradient(135deg, var(--color-primary-gradient-start) 0%, var(--color-primary-gradient-end) 100%);
    --gradient-premium: linear-gradient(135deg, var(--color-premium-gradient-start) 0%, var(--color-premium-gradient-end) 100%);
    --gradient-timeline-muted: linear-gradient(135deg, var(--color-timeline-muted-start) 0%, var(--color-timeline-muted-end) 100%);

    /* ─────────────────────────────────────────────────────────────────── */
    /* Panel-Scoped Tokens (Modals + Manager Sidebars)                     */
    /* These are additive and opt-in; they do not change global defaults.  */
    /* ─────────────────────────────────────────────────────────────────── */
    /* Spacing (panels only) */
    --panel-space-0: 0px;
    --panel-space-1: var(--spacing-4);    /* 4px */
    --panel-space-2: var(--spacing-8);    /* 8px */
    --panel-space-3: var(--spacing-12);   /* 12px */
    --panel-space-4: var(--spacing-16);   /* 16px */
    --panel-space-5: var(--spacing-20);   /* 20px */
    --panel-space-6: 24px;
    --panel-space-7: 32px;
    --panel-space-8: 40px;

    /* Typography (panels only) */
    --panel-font-title-size: var(--font-size-2xl);
    --panel-font-title-weight: var(--font-weight-semibold);
    --panel-font-subtitle-size: var(--font-size-sm);
    --panel-font-body-size: var(--font-size-base);
    --panel-font-helper-size: var(--font-size-sm);
    --panel-font-body-weight: var(--font-weight-normal);

    /* Radius (panels only) */
    --panel-radius-sm: var(--radius-md);
    --panel-radius-md: var(--radius-lg);
    --panel-radius-lg: var(--radius-2xl);

    /* Neutrals (panels only) */
    --panel-surface: var(--color-bg-primary);
    --panel-surface-subtle: var(--color-bg-secondary);
    --panel-surface-muted: var(--color-bg-tertiary);
    --panel-border-subtle: var(--color-border-lighter);
    --panel-border-strong: var(--color-border-light);
    --panel-text: var(--color-text-primary);
    --panel-text-muted: var(--color-text-muted);
    --panel-shadow: var(--shadow-xl);
    --panel-overlay-scrim: var(--color-bg-overlay);

    /* ─────────────────────────────────────────────────────────────────── */
    /* Z-Index Scale - Single Source of Truth for Layer Stacking */
    /* ─────────────────────────────────────────────────────────────────── */
    /* Canvas internal layers (1-12) */
    --z-canvas-base: 1;
    --z-canvas-event: 6;
    --z-canvas-cluster: 10;
    --z-canvas-cluster-label: 11;
    --z-canvas-selection: 12;
    
    /* App layout layers (50-100) */
    --z-sidebar: 50;
    --z-sidebar-overlay: 51;
    --z-timeline-marker: 99;
    --z-header: 100;
    --z-dropdown: 101;
    
    /* Overlay layers (800-1000) */
    --z-sidebar-popover: 800;
    --z-modal-base: 1000;
    
    /* Modal variations and stacked modals (1000-1200) */
    --z-modal-stack-increment: 10;
    --z-modal-picker: 1010;
    --z-modal-datepicker: 1011;
    --z-modal-dropdown: 1020;
    --z-modal-nested: 1050;
    --z-modal-attachment: 1060;
    --z-modal-image-preview: 1090;
    --z-modal-bulk-upload: 1100;
    --z-modal-comparison: 1140;
    --z-modal-comparison-header: 1150;
    
    /* Popovers and tooltips */
    --z-tooltip: 2000;
    
    /* Critical UI overlays (9999-12000) */
    --z-modal-blocking: 9999;
    --z-canvas-overlay: 10000;
    --z-modal-special: 10001;
    --z-attachment-sidebar: 11000;
    --z-billing-overlay: 12000;
    
    /* Toasts - highest priority (100000+) */
    --z-toast: 100000;
    --z-toast-billing: 100001;

    /* Accent usage (panels only) */
    --panel-accent: var(--color-primary);
    --panel-accent-strong: var(--color-primary-dark);
    --panel-accent-contrast: var(--color-text-inverse);

    /* Buttons (size only; variants come later) */
    --panel-button-height: 36px;
    --panel-button-padding-x: 14px;
    --panel-button-padding-y: 8px;
    --panel-button-gap: 6px;
    --panel-button-radius: var(--radius-md);

    /* Inputs (surface + focus only) */
    --panel-input-padding-y: 10px;
    --panel-input-padding-x: 12px;
    --panel-input-radius: var(--radius-md);
    --panel-input-bg: var(--color-bg-primary);
    --panel-input-border: var(--color-border-light);
    --panel-input-placeholder: var(--color-text-muted);
    --panel-input-focus-border: var(--color-primary);
    --panel-input-focus-ring: var(--shadow-focus);
}

html.yrh-shell-phone {
    --yrh-shell-inline-gutter: 16px;
}

html.yrh-shell-tablet {
    --yrh-shell-inline-gutter: clamp(24px, 3.4vw, 32px);
    --yrh-sidebar-width: clamp(320px, 40vw, 380px);
    --yrh-auth-panel-max-width: min(760px, calc(100vw - 96px));
    --yrh-primary-modal-width: min(860px, calc(100vw - 112px));
    --yrh-secondary-modal-width: min(680px, calc(100vw - 120px));
    --yrh-primary-modal-height: min(820px, calc(100dvh - (96px + env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px))));
    --yrh-centered-modal-height: min(640px, calc(100dvh - (96px + env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px))));
    --yrh-shell-header-height: 72px;
}

html.yrh-shell-desktop {
    --yrh-shell-inline-gutter: clamp(24px, 4vw, 32px);
    --yrh-sidebar-width: clamp(320px, 34vw, 380px);
    --yrh-auth-panel-max-width: min(760px, calc(100vw - 72px));
    --yrh-primary-modal-width: min(920px, calc(100vw - 72px));
    --yrh-secondary-modal-width: min(720px, calc(100vw - 72px));
    --yrh-primary-modal-height: min(820px, calc(100dvh - (64px + env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px))));
}

html.yrh-tier-desktop {
    --yrh-shell-inline-gutter: clamp(28px, 3vw, 40px);
    --yrh-sidebar-width: clamp(360px, 30vw, 400px);
    --yrh-auth-panel-max-width: min(760px, calc(100vw - 128px));
    --yrh-primary-modal-width: min(1040px, calc(100vw - 96px));
    --yrh-secondary-modal-width: min(760px, calc(100vw - 96px));
    --yrh-primary-modal-height: min(860px, calc(100dvh - (72px + env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px))));
}

html.yrh-shell-desktop.yrh-tier-desktop[data-layout-input="touch"] {
    --yrh-shell-header-height: 64px;
    --yrh-shell-inline-gutter: clamp(24px, 4vw, 36px);
    --yrh-sidebar-width: clamp(360px, 36vw, 440px);
    --yrh-auth-panel-max-width: min(860px, calc(100vw - 96px));
    --yrh-primary-modal-width: min(980px, calc(100vw - 88px));
    --yrh-secondary-modal-width: min(800px, calc(100vw - 88px));
    --yrh-primary-modal-height: min(860px, calc(100dvh - (88px + env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px))));
}

html.yrh-shell-desktop.yrh-tier-desktop[data-layout-input="touch"] {
    --yrh-shell-inline-gutter: clamp(28px, 3.2vw, 42px);
    --yrh-sidebar-width: clamp(380px, 33vw, 460px);
    --yrh-auth-panel-max-width: min(920px, calc(100vw - 128px));
    --yrh-primary-modal-width: min(1080px, calc(100vw - 112px));
    --yrh-secondary-modal-width: min(860px, calc(100vw - 112px));
    --yrh-primary-modal-height: min(900px, calc(100dvh - (96px + env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px))));
}

/* ========================================================================== */
/* BASE STYLES */
/* ========================================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    background-color: var(--color-bg-primary);
}

body {
    font-family: var(--font-family-base);
    background: var(--color-bg-tertiary);
    min-height: 100vh;
}

/* Phase 1b: Prevent page-level scroll in Canvas view on iOS Safari.
   Canvas and sidebar manage their own internal scrolling.
   This avoids the "rubber band" grey bar reveal at the bottom. */
@supports (-webkit-touch-callout: none) {
    body.canvas-active {
        overflow: hidden;
        overscroll-behavior: none;
    }
}

/* Disable global scroll when Activity overlay is active.
   Legacy alias: home-active (older builds) */
body.activity-active,
body.home-active {
    overflow: hidden;
}

/* ========================================================================== */
/* GLOBAL FOCUS STATES (Accessibility)                                        */
/* ========================================================================== */

/* Default focus-visible for interactive elements without custom focus styles */
:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Remove default focus ring - focus-visible above provides keyboard-only ring */
:focus:not(:focus-visible) {
    outline: none;
}

/* ========================================================================== */
/* GLOBAL SCROLLBAR THEME (match timeline picker scrollbar) */
/* ========================================================================== */

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--yrh-scrollbar-thumb) var(--yrh-scrollbar-track);
}

/* Chromium/WebKit */
*::-webkit-scrollbar {
    width: var(--yrh-scrollbar-size);
    height: var(--yrh-scrollbar-size);
}

*::-webkit-scrollbar-track {
    background: var(--yrh-scrollbar-track);
}

*::-webkit-scrollbar-thumb {
    background: var(--yrh-scrollbar-thumb);
    border-radius: var(--yrh-scrollbar-thumb-radius);
    border: var(--yrh-scrollbar-thumb-border) solid transparent;
    background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
    background: var(--yrh-scrollbar-thumb-hover);
    border: var(--yrh-scrollbar-thumb-border) solid transparent;
    background-clip: padding-box;
}