/* ================================================================
   PROJECT MEMORY — theme-clean.css
   TOKENS + RESET ONLY.
   This file must load first. All other theme-clean-*.css files
   depend on these variables. Never add component styles here.
   ================================================================ */


/* ----------------------------------------------------------------
   TOKENS
   All design values live here as custom properties.
   Theming = overriding these variables. Never hardcode values.
   ---------------------------------------------------------------- */

/**
 * @pm-registry
 * @prefix pm
 * @type        css-tokens
 * @name        pm-design-tokens
 * @description Root CSS custom properties — all design tokens for
 *   color, typography, spacing, shadow, z-index, and safe areas.
 *   Overriding these variables is the only supported way to theme the app.
 * @apps project-memory
 * @tags        tokens
 * @called-by   all (global token file — consumed by every theme-clean-*.css file)
 * @depends-on  none
 * @updated 2026-04-13
 */
:root {
    /* Brand */
    --pm-brand:              #5C6BC0;
    --pm-brand-dark:         #3949AB;
    --pm-brand-light:        #E8EAF6;

    /* Home gradient — rich, colorful, designed for big buttons */
    --pm-home-gradient-start:      #00BFA5;
    --pm-home-gradient-end:        #5C35B8;

    /* Panel backgrounds — clean and text-friendly */
    --pm-panel-background:           #F5F4F2;
    --pm-panel-surface:      #FFFFFF;

    /* Semantic colours */
    --pm-danger:             #DC2626;
    --pm-danger-dark:        #B91C1C;
    --pm-danger-light:       #FEE2E2;
    --pm-success:            #16A34A;
    --pm-success-light:      #DCFCE7;
    --pm-warning:            #B45309;
    --pm-warning-background: #FFFBEB;
    --pm-reminder:           #7C3AED;
    --pm-reminder-light:     #EDE9FE;
    --pm-reminder-border:    #C4B5FD;

    /* Accent — used for calendar today indicator and other one-off highlights */
    --pm-accent:             #ff4081;

    /* Calendar event types — each type has a bg, border, and text colour */
    --pm-event-blue-bg:      #E3F2FD;
    --pm-event-blue:         #2196F3;
    --pm-event-blue-dark:    #1976D2;
    --pm-event-orange-bg:    #FFF3E0;
    --pm-event-orange:       #FB8C00;
    --pm-event-orange-dark:  #E65100;

    /* Category badge colours — for reminder and note category pills */
    --pm-category-purple-bg: #f3e5f5;
    --pm-category-purple:    #6a1b9a;
    --pm-category-info:      #1565c0;
    --pm-category-orange-bg: #ffe0b2;

    /* Dark media viewer — used by memory-view for dark-background media display */
    --pm-dark-bg:            #1a1a2e;
    --pm-dark-surface:       #0f3460;

    /* Reminder gradient — end colour for the reminder button gradient */
    --pm-reminder-gradient-end: #4f46e5;

    /* Surfaces — legacy aliases kept until all CSS is migrated to pm-panel-background / pm-panel-surface */
    --pm-background:                 var(--pm-panel-background);
    --pm-surface:            var(--pm-panel-surface);
    --pm-surface-2:          #F0EFF0;
    --pm-border:             #E4E2E8;

    /* Text */
    --pm-text-1:             #1C1B1F;
    --pm-text-2:             #49454F;
    --pm-text-3:             #79747E;

    /* Border radii */
    --pm-radius-xsmall:          4px;
    --pm-radius-small:          10px;
    --pm-radius-medium:         18px;
    --pm-radius-large:          26px;
    --pm-radius-full:          999px;

    /* Shadows */
    --pm-shadow-small:          0 1px 4px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04);
    --pm-shadow-medium:         0 4px 16px rgba(0,0,0,0.10);
    --pm-shadow-large:          0 8px 32px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.10);
    --pm-shadow-sheet:          0 -10px 40px rgba(0,0,0,0.25);
    --pm-shadow-inset:          0 1px 3px rgba(0,0,0,0.20);

    /* Overlays — white and dark at standard opacity levels.
       Use these for buttons, text, and panel overlays on dark/image backgrounds.
       Never invent a new rgba opacity — pick the nearest level here. */
    /* Status overlays — for recording indicators and active state backgrounds */
    --pm-overlay-success:        rgba(34,197,94,0.60);
    --pm-overlay-success-border: rgba(34,197,94,0.80);
    --pm-overlay-danger:         rgba(220,38,38,0.85);
    --pm-overlay-warning:        rgba(217,119,6,0.85);

    --pm-overlay-white-faint:   rgba(255,255,255,0.08);
    --pm-overlay-white-soft:    rgba(255,255,255,0.25);
    --pm-overlay-white-mid:     rgba(255,255,255,0.50);
    --pm-overlay-white-muted:   rgba(255,255,255,0.70);
    --pm-overlay-white-strong:  rgba(255,255,255,0.90);
    --pm-overlay-dark-soft:     rgba(0,0,0,0.15);
    --pm-overlay-dark-mid:      rgba(0,0,0,0.45);
    --pm-overlay-dark-strong:   rgba(0,0,0,0.70);

    /* Layout */
    --pm-nav-height:         62px;
    --pm-safe-bottom:        env(safe-area-inset-bottom, 12px);
    --pm-safe-top:           env(safe-area-inset-top, 0px);
    --pm-column-max:         50vw;
    --pm-column-min:         480px;
    --pm-breakpoint:         768px;

    /* Z-index scale */
    --pm-z-base:             0;
    --pm-z-overlay:          500;
    --pm-z-sheet:            600;
    --pm-z-modal:            700;
    --pm-z-nav:              800;
    --pm-z-critical:         1000;
}


/* ----------------------------------------------------------------
   RESET
   Minimal — only what every component needs as a zero baseline.
   ---------------------------------------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--pm-background);
    color: var(--pm-text-1);
    -webkit-tap-highlight-color: transparent;
    overflow-x: hidden;
}

button {
    font-family: inherit;
    touch-action: manipulation;
    cursor: pointer;
    border: none;
    background: none;
}

input, textarea {
    font-family: inherit;
}