/* theme-base.css */
/* Basic body, font setup, core theme background, and CSS Custom Properties */

:root {
    /* Base Text Colors */
    --text-primary: #f1f3f5;
    --text-secondary: #dae0e6;
    --text-muted: #c8d0d9;
    --text-interactive: #6baae0; /* For links or interactive text elements */

    /* Glassmorphism Panel Properties */
    --panel-bg-color: rgba(25, 30, 45, 0.25); /* Base for #controls */
    --panel-backdrop-filter: blur(32px) saturate(180%);
    --panel-bg-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.025) 0%, rgba(255, 255, 255, 0) 20%);
    --panel-border-color: rgba(255, 255, 255, 0.15);
    --panel-border-radius: 20px;
    --panel-box-shadow: 0 14px 50px rgba(0, 0, 0, 0.4);

    /* Slightly different variant for nested/secondary panels like control-groups or modals if needed */
    --panel-secondary-bg-color: rgba(25, 30, 45, 0.35); /* Used by auth-panel, modal-content */
    --panel-secondary-backdrop-filter: blur(32px) saturate(180%); /* Can be same or slightly different */
    --panel-secondary-bg-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0) 20%);
    --panel-secondary-border-color: rgba(255, 255, 255, 0.15);
    --panel-secondary-border-radius: 18px; /* Example: modals might be slightly different */
    --panel-secondary-box-shadow: 0 12px 45px rgba(0, 0, 0, 0.38);


    /* Control Group Properties (nested within panels) */
    --control-group-bg-color: rgba(40, 48, 65, 0.18);
    --control-group-backdrop-filter: blur(22px) saturate(150%);
    --control-group-border-color: rgba(255, 255, 255, 0.10);
    --control-group-border-radius: 14px;
    --control-group-box-shadow: 0 6px 22px rgba(0, 0, 0, 0.28);
    --control-group-bg-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.035) 0%, rgba(255, 255, 255, 0) 25%);

    /* Button Properties */
    --button-default-bg: rgba(55, 65, 90, 0.30);
    --button-default-text: #f0f4f8;
    --button-default-border: rgba(255, 255, 255, 0.12);
    --button-border-radius: 11px;
    --button-padding: 0.7rem 1.05rem;
    --button-font-size: 0.92rem;
    --button-font-weight: 500;

    /* Input Properties */
    --input-bg-color: rgba(22, 28, 40, 0.55);
    --input-text-color: #f0f3f6;
    --input-border-color: rgba(255, 255, 255, 0.12);
    --input-border-radius: 9px;
    --input-focus-border-color: rgba(120, 195, 255, 0.8);
    --input-focus-glow: rgba(120, 195, 255, 0.3);

    /* Responsive font sizes */
    --font-size-base: 16px; /* Base for rem calculations */
    --font-size-sm: 0.875rem; /* 14px */
    --font-size-md: 1rem;    /* 16px */
    --font-size-lg: 1.125rem; /* 18px */
    --font-size-xl: 1.25rem;  /* 20px */
    --font-size-xxl: 1.5rem; /* 24px */
}

html {
    font-size: var(--font-size-base); /* Use CSS variable for base font size */
}

body {
    margin: 0;
    overflow: hidden; /* Prevent body scrollbars */
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', system-ui, 'Segoe UI', Roboto, sans-serif;
    color: var(--text-primary);
    background: radial-gradient(ellipse at 65% 35%, hsla(222, 45%, 48%, 1) 0%, hsla(228, 40%, 30%, 1) 35%, hsla(230, 35%, 18%, 1) 100%);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: var(--font-size-md); /* Default body font size */
}

#container {
    width: 100vw;
    height: 100vh;
    position: relative;
    padding: 0;
    overflow: hidden; /* Ensure container itself doesn't cause scroll */
}

#canvas-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-width: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
    z-index: 1;
}

canvas {
    display: block;
    width: 100%;
    height: 100%;
}

#canvas-container.slice-edit-active {
    cursor: crosshair;
}

/* Responsive Typography Adjustments */
@media (max-width: 767px) { /* Tablets and smaller */
    :root {
        --font-size-sm: 0.8rem;   /* ~12.8px */
        --font-size-md: 0.9rem;   /* ~14.4px */
        --font-size-lg: 1rem;     /* 16px */
        --font-size-xl: 1.1rem;   /* ~17.6px */
        --font-size-xxl: 1.25rem; /* 20px */

        --button-font-size: 0.85rem;
        --button-padding: 0.6rem 0.9rem;
    }
    body {
        font-size: var(--font-size-md);
    }
}

@media (max-width: 479px) { /* Smartphones */
    :root {
        --font-size-sm: 0.75rem;  /* 12px */
        --font-size-md: 0.875rem; /* 14px */
        --font-size-lg: 0.95rem;  /* ~15.2px */
        --font-size-xl: 1.05rem;  /* ~16.8px */
        --font-size-xxl: 1.2rem;  /* ~19.2px */

        --button-font-size: 0.8rem;
        --button-padding: 0.55rem 0.8rem;
        
        /* Reduce panel border radius on small screens for a tighter look */
        --panel-border-radius: 16px;
        --panel-secondary-border-radius: 14px;
        --control-group-border-radius: 10px;
        --button-border-radius: 9px;
        --input-border-radius: 7px;
    }
     body {
        font-size: var(--font-size-md);
    }
}