@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap');

/*
 * Single source of truth for all design tokens.
 * Per AGENTS.md: zero hardcoded colors/spacing/values outside this file.
 * All future component CSS must consume these variables exclusively.
 */
:root {
  /* Palette + derived UI colors. No hardcoded color values elsewhere. */
  --color-primary: #8789c0;
  --color-primary-dark: #8380b6;
  --color-secondary: #45f0df;
  --color-secondary-alt: #c2cae8;
  --color-dark: #111d4a;
  --color-bg: #ffffff;
  --color-bg-alt: #f0f2ff;
  --color-surface: #ffffff;
  --color-surface-alt: #f0f2ff;
  --color-text: #111d4a;
  --color-text-muted: rgba(17, 29, 74, 0.6);
  --color-border: rgba(135, 137, 192, 0.3);
  /* Home page surface hierarchy and on-colors. */
  --color-on-secondary: #111d4a;
  --color-tertiary: #8890ac;
  --color-error: #ff6b6b;
  --color-surface-low: #f0f0f0;
  --color-surface-high: #e5e5e5;
  --color-surface-highest: #d9d9d9;
  --color-secondary-fixed: #53fae9;
  --color-accent: #45f0df;
  /* Fonts (Space Grotesk/Inter) + font weights */
  --font-headline: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-weight-headline: 700;
  --font-weight-body: 400;
  --font-weight-body-bold: 600;
  --font-weight-medium: 500;
  /* Rem-based spacing scale. */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-2xs: 0.125rem;          /* extra-fine spacing */
  --space-between: 0.75rem;       /* gap between siblings (0.75rem = 12px) */
  /* Default radius for game-style rounded elements. */
  --radius-default: 0.75rem;
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
  --radius-full: 9999px;
  /* AGENTS.md required vars for mobile-first min-width media queries. */
  --breakpoint-sm: 768px;
  --breakpoint-md: 1024px;
  --breakpoint-lg: 1440px;
  --max-width-container: 1280px;
  --breakpoint-max-sm: 47.9375rem; /* max-width counterpart of --breakpoint-sm (767px) */
  /* Game-style colorful shadows visual style. */
  --shadow-sm: 0 1px 3px rgba(135, 137, 192, 0.1);
  --shadow-md: 0 4px 6px rgba(135, 137, 192, 0.15);
  --shadow-lg: 0 10px 15px rgba(135, 137, 192, 0.2);
  --shadow-glow: 0 0 15px rgba(69, 240, 223, 0.3);
  --shadow-block: 0 4px 12px rgba(135, 137, 192, 0.25);
  --shadow-hard: 4px 4px 0 0 var(--color-dark);
  --shadow-hard-sm: 2px 2px 0 0 var(--color-dark);
  --shadow-elevated: 8px 8px 0 0 rgba(0, 0, 0, 0.6);
  --shadow-glow-warm: 0 0 8px rgba(255, 180, 171, 0.3);
  --shadow-glow-secondary: 0 0 0.5rem rgba(69, 240, 223, 0.5);
  --shadow-inset: inset 2px 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-panel: 0 -8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  /* Page transition speed (200ms) + touch target min (44px eq). */
  --transition-default: 200ms ease;
  --transition-slow: 300ms ease;
  --touch-target-min: 2.75rem;
  --touch-target-xs: 2.25rem;     /* smaller interactive elements (modal buttons) */
  --touch-target-sm: 2.5rem;      /* medium controls (header buttons, sidebar) */
  --z-base: 1;
  --z-dropdown: 10;
  --z-modal-backdrop: 20;
  --z-modal: 100;
  --z-toast: 30;
  /* Rem-based typography scale per AGENTS.md relative unit rule. */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg-body: 1.125rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --text-3xl: 2.5rem;
  --text-4xs: 0.5625rem;          /* delete button icon */
  --text-3xs: 0.625rem;           /* c-block footer */
  --text-2xs: 0.6875rem;          /* select, badge, footer */
  --text-sm-md: 0.8125rem;        /* block labels, header buttons */
  --text-md-lg: 1.125rem;         /* section titles, sidebar headings */
  --text-4xl: 3rem;
  --leading-tight: 1.2;
  --leading-normal: 1.5;
  --leading-loose: 1.75;
  --leading-none: 1;
  --leading-compact: 1.1;
  --tracking-tight: -0.02em;
  --tracking-wide: 0.05em;
  /* Game easing for bouncy interactions + pulse duration for phase nodes. */
  --easing-default: ease;
  --easing-game: cubic-bezier(0.68, -0.55, 0.27, 1.55);
  --duration-instant: 100ms;
  --duration-fast: 200ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;
  --duration-pulse: 2s;
  --duration-quick: 0.15s;        /* between instant and fast (block hover) */
  --duration-glow: 1.2s;          /* executing block pulse animation */
  /* Standardized accessibility states for all interactive elements per AGENTS.md. */
  --focus-outline-width: 2px;
  --focus-outline-color: var(--color-secondary);
  --focus-outline-offset: 2px;
  --hover-opacity: 0.9;
  --active-scale: 0.98;
  --disabled-opacity: 0.5;
  /* Reusable values for future components. No component-specific styles. */
  --phase-node-size-mobile: 5rem;
  --phase-node-size-desktop: 6.25rem;
  --phase-node-locked-opacity: 0.5;
  --phase-path-width-mobile: 0.25rem;
  --phase-path-width-desktop: 0.375rem;
  --phase-path-color-filled: var(--color-primary);
  --phase-path-color-dashed: rgba(17, 29, 74, 0.2);
  --block-border-radius: var(--radius-default);
  --block-shadow-dragging: 0 8px 20px rgba(135, 137, 192, 0.4);
  --block-color-selected: var(--color-secondary);
  --block-color-error: #ff6b6b;
  --block-connection-dot-size: 0.75rem;
  --block-connection-line-width: 0.125rem;
  --slot-color-empty: rgba(135, 137, 192, 0.2);
  --slot-color-filled: var(--color-secondary);
  /* Drawer layout tokens for mobile per prompt. */
  --drawer-height-retracted: 3.75rem;
  --drawer-height-expanded-bottom: 70vh;
  --drawer-height-expanded-top: 100%;
  --drawer-handle-size: 0.25rem;
  --drawer-transition: var(--duration-normal) var(--easing-default);
  /* Game-style backgrounds/gradients */
  --gradient-primary: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  --gradient-card-hover: linear-gradient(135deg, var(--color-primary), var(--color-secondary-alt));
  --gradient-bg-game: radial-gradient(circle at 20% 50%, rgba(194, 202, 232, 0.1) 0%, transparent 50%);
  /* Icons specifications */
  --home-gradient-bg-game: radial-gradient(circle at 2px 2px, color-mix(in srgb, var(--color-primary) 5%, transparent) 1px, transparent 0);
  /* icons especifications*/
  --icon-sm: 1rem;
  --icon-md: 1.5rem;
  --icon-lg: 2rem;
  --icon-xl: 3rem;
  --icon-between: 1.25rem;
  --icon-color-default: var(--color-dark);
  --icon-color-active: var(--color-secondary);
  /* Text color variants for dark surfaces */
  --color-text-bright: #e5e1e6;
  --color-text-dim: rgba(229, 225, 230, 0.4);
  --color-text-subtle: rgba(229, 225, 230, 0.6);
  --color-text-faint: rgba(229, 225, 230, 0.35);
  --color-text-ghost: rgba(229, 225, 230, 0.12);
  /* Danger/destructive action colors (modals, delete buttons) */
  --color-danger-text: #3a0000;
  --color-danger-hover: #ffcdc7;
  --color-danger-shadow: #690005;
  /* C-block input fields (number input inside Repeat/If blocks) */
  --color-input-bg: #ffffff;
  --color-input-text: #111d4a;
  --color-input-border: rgba(17, 29, 74, 0.15);
  /* C-block dropzone (dashed area inside Repeat/If blocks) */
  --color-dropzone-border: rgba(17, 29, 74, 0.15);
  /* Surface hover state (scrollbar thumb, cancel button hover) */
  --color-surface-hover: #6b6b75;
  /* Modal/overlay backdrop */
  --color-overlay: rgba(0, 0, 0, 0.6);
  /* Cancel button border-bottom */
  --color-cancel-border: #353535;
  /* Stage footer: level badge background */
  --color-badge-bg: rgba(0, 0, 0, 0.3);
  /* Workspace controls: clear button subtle background */
  --color-clear-bg: rgba(255, 180, 171, 0.1);
  /* Drag-and-drop snap preview: glow background */
  --color-snap-bg: rgba(69, 240, 223, 0.08);
  /* Creator page — snake body tint (page-specific) */
  --creator-snake-body: var(--color-primary);
  /* Page background: radial dot pattern color */
  --color-grid-dot: rgba(192, 194, 252, 0.05);
  /* Layout tokens shared across games */
  --sidebar-width: 15rem;
  --sidebar-width-lg: 16rem;
  --sidebar-width-right: 20rem;
  --size-cell: 3rem;
  --size-preview: 3rem;
  --size-asset-item: 3.5rem;
  --grid-max-width: 25rem;
  --grid-max-width-mobile: 18rem;
  --grid-bg-size: 2rem;
  --modal-max-width: 24rem;
  --sidebar-height-mobile: 7rem;
  /* Layout heights for fixed top-app-bar and bottom-nav (measured from real components) */
  --layout-header-height: 5rem;       /* 80px - TopAppBar */
  --layout-nav-height: 5.125rem;      /* 82px - BottomNav */
  /* Border widths */
  --border-width-game: 4px;
  --border-width-thin: 2px;
  --border-width-hairline: 1px;
  /* Glow/box-shadow spread distances */
  --glow-spread-2xs: 0.5rem;
  --glow-spread-xs: 0.625rem;
  --glow-spread-sm: 0.9375rem;
  --glow-spread-md: 1.25rem;
  --glow-spread-lg: 2rem;
  /* Button active/press vertical offset */
  --button-active-offset: 2px;
  /* Modal overlay background blur intensity */
  --backdrop-blur-amount: 4px;
  --blur-panel: 12px;
  /* Layered stacking order for vanilla CSS, no z-index in component files. */
  --z-block-dragging: 15;
  --z-drawer: 15;
  --z-connection-line: 5;
  --z-tooltip: 25;

  /* Home page prefixed aliases — tokens consumed exclusively by home page components. */
  --home-color-on-secondary: var(--color-on-secondary);
  --home-color-tertiary: var(--color-tertiary);
  --home-color-error: var(--color-error);
  --home-color-surface-low: var(--color-surface-low);
  --home-color-surface-high: var(--color-surface-high);
  --home-color-surface-highest: var(--color-surface-highest);
  --home-color-secondary-fixed: var(--color-secondary-fixed);
  --home-font-weight-medium: var(--font-weight-medium);
  --home-shadow-hard: var(--shadow-hard);
  --home-shadow-hard-sm: var(--shadow-hard-sm);
  --home-text-lg-body: var(--text-lg-body);
}

/*
 * Dark mode overrides.
 * Dark backgrounds (#111d4a/#1a2450) + adjusted shadows/paths for readability.
 */
[data-theme="dark"] {
  --color-bg: #131316;
  --color-bg-alt: #1a2450;
  --color-surface: #1a2450;
  --color-surface-alt: #111d4a;
  --color-text: #f0f2ff;
  --color-text-muted: rgba(240, 242, 255, 0.6);
  --color-border: rgba(194, 202, 232, 0.3);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.3);
  --shadow-glow: 0 0 15px rgba(69, 240, 223, 0.2);
  --shadow-block: 0 4px 12px rgba(0, 0, 0, 0.3);
  --phase-path-color-dashed: rgba(240, 242, 255, 0.2);
  --slot-color-empty: rgba(194, 202, 232, 0.2);
  --gradient-bg-game: radial-gradient(circle at 20% 50%, rgba(194, 202, 232, 0.05) 0%, transparent 50%);
  /* Additional dark mode tokens for level-selector page */
  --color-surface-container: #201f23;
  --color-surface-container-lowest: #0e0e11;
  --color-surface-container-highest: #353438;
  --color-outline: #918f9a;
  --color-outline-variant: #46464f;
  --color-primary-container: #8a8cc3;
  --color-on-primary-container: #222455;
  --color-on-secondary: #003732;
  --color-primary-emphasis: #c0c2fc;
  --color-accent: #45f0df;
  /* Additional dark mode tokens for Home page */
  --color-on-secondary: #003732;
  --color-tertiary: #bec6e3;
  --color-error: #ffb4ab;
  --color-surface-low: #1b1b1f;
  --color-surface-high: #2a292d;
  --color-surface-highest: #353438;
  --shadow-hard: 4px 4px 0 0 #000000;
  --shadow-hard-sm: 2px 2px 0 0 #000000;
  --home-gradient-bg-game: none;
  /*Additional dark mode tokens for Snake Game page*/
  /* Text color variants — dark mode: light text on dark surfaces */
  --color-text-bright: #e5e1e6;
  --color-text-dim: rgba(229, 225, 230, 0.4);
  --color-text-subtle: rgba(229, 225, 230, 0.6);
  --color-text-faint: rgba(229, 225, 230, 0.35);
  --color-text-ghost: rgba(229, 225, 230, 0.12);
  /* Input fields — dark mode: dark surface with light text */
  --color-input-bg: #2A2A2A;
  --color-input-text: #f0f2ff;
  --color-input-border: rgba(255, 255, 255, 0.15);
  /* Dropzone border inside c-blocks */
  --color-dropzone-border: rgba(255, 255, 255, 0.15);
  /* Badge background in dark mode */
  --color-badge-bg: rgba(0, 0, 0, 0.5);
  /* Grid dot pattern in dark mode */
  --color-grid-dot: rgba(192, 194, 252, 0.05);
  --gradient-bg-game-home: none;

  /* =============================================
     VISUAL-LOGIC UPDATE (Pedro DLucca)
     Visual Programming Page - Figma Prototype Reference
     Date: 2026-05-10
     Purpose: Neutral dark backgrounds matching Figma prototype
     ============================================= */
  --color-bg-neutral: #121212;
  --color-surface-neutral: #1E1E1E;
  --color-surface-neutral-elevated: #2A2A2A;
  --color-surface-modal: #1E1E2E;
  --color-border-neutral: rgba(255, 255, 255, 0.12);
  --color-input-bg-neutral: #2A2A2A;
  --color-input-border-neutral: rgba(255, 255, 255, 0.15);
  --color-snap-bg-neutral: rgba(69, 240, 223, 0.08);
  
  /* Block colors matching Figma prototype */
  --color-block-action: #45F0DF;
  --color-block-action-hover: #5FF8E9;
  --color-block-control: #2D2D44;
  --color-block-control-hover: #3D3D54;
  --color-block-event: #2D2D44;
  --color-block-event-hover: #3D3D54;
  --color-block-text-action: #00201D;
  --color-block-text-control: #E5E1E6;
  --radius-block: 0.75rem;
  
  /* Workspace clear button styling - Opção 2 (danger style) */
  --color-clear-btn-bg: transparent;
  --color-clear-btn-border: var(--color-clear);
  --color-clear-btn-hover-bg: var(--color-clear);
  --color-clear-btn-hover-border: var(--color-clear);
  
  /* Level Objective Card */
  --color-card-bg: #F5F5F7;
  --color-card-text-title: #8E8E93;
  --color-card-text-body: #8E8E93;
  --color-card-progress-bg: #1A1A2E;
  --color-card-progress-fill-start: #45F0DF;
  --color-card-progress-fill-end: #8789C0;
  --color-card-icon: #8789C0;
  --color-card-counter: #8789C0;
  
  /* Responsive layout tokens */
  --sidebar-width-desktop: 15rem;
  --sidebar-width-laptop: 13rem;
  --sidebar-width-tablet: 12rem;
  --stage-column-width-desktop: 28rem;
  --stage-column-width-laptop: 24rem;
  --stage-column-width-tablet: 20rem;
  
  /* =============================================
     SNAKE PAGE ADDITIONAL TOKENS (Pedro DLucca)
     Date: 2026-05-10
     Purpose: Game-specific color tokens and layout
     tokens required by snake.css that do not exist
     in the current design system.
     ============================================= */
  /* Game entity colors */
  --color-snake-body: #00d5c5;
  --color-apple: #ffb4ab;
  --color-apple-glow: rgba(255, 180, 171, 0.5);
  --color-spike: #b0adb8;
  --color-apple-stem: #4a2828;
  --color-apple-highlight: rgba(255, 255, 255, 0.3);
  --color-run-shadow: #005049;
  --color-pause-text: #131546;
  --color-shadow-pure: #000000;
  --color-card-icon: #4a90e2;
  --color-card-border: rgba(74, 144, 226, 0.2);

  /* Layout heights (measured from real components) */
  --layout-header-height: 5rem;       /* 80px - TopAppBar */
  --layout-nav-height: 5.125rem;      /* 82px - BottomNav */

  /* Desktop-first breakpoints specific to snake page */
  --breakpoint-snake-laptop: 75rem;      /* 1200px */
  --breakpoint-snake-tablet: 56.1875rem; /* 899px */
  /* ============================================= */
}

/*
 * Light mode overrides.
 * Light backgrounds (#faf9ff/#ffffff) + dark text + adjusted surface hierarchy.
 * Brand colors (lavender, turquoise, periwinkle) remain the same across themes.
 */
[data-theme="light"] {
  --color-bg-home: #faf9ff;
  --color-surface-container: #ebedfa;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-highest: #e0e2ef;
  --color-surface-dim: #d7d9e6;
  --color-outline: #767680;
  --color-outline-variant: #c6c5d0;
  --color-primary-container: #111d4a;
  --color-on-primary-container: #f0f2ff;
  --color-primary-emphasis: #111d4a;
  --color-accent: #111d4a;
  --gradient-bg-game-home: var(--gradient-bg-game);
  /* Flip text-on-dark tokens to work over light backgrounds */
  --color-text-bright: #111d4a;
  --color-text-dim: rgba(17, 29, 74, 0.4);
  --color-text-subtle: rgba(17, 29, 74, 0.6);
  --color-text-faint: rgba(17, 29, 74, 0.35);
  --color-text-ghost: rgba(17, 29, 74, 0.12);

  /* Layout tokens — theme-agnostic (same values as dark mode) */
  --layout-header-height: 5rem;
  --layout-nav-height: 5.125rem;
  --breakpoint-snake-laptop: 75rem;
  --breakpoint-snake-tablet: 56.1875rem;
  --sidebar-width-desktop: 15rem;
  --sidebar-width-laptop: 13rem;
  --sidebar-width-tablet: 12rem;
  --stage-column-width-desktop: 28rem;
  --stage-column-width-laptop: 24rem;
  --stage-column-width-tablet: 20rem;
  --radius-block: 0.75rem;

  /* Neutral surface tokens — light backgrounds */
  --color-bg-neutral: #faf9ff;
  --color-surface-neutral: #ffffff;
  --color-surface-neutral-elevated: #ebedfa;
  --color-surface-modal: #ffffff;
  --color-border-neutral: rgba(17, 29, 74, 0.1);

  /* Input tokens — light mode */
  --color-input-bg-neutral: #ffffff;
  --color-input-border-neutral: rgba(17, 29, 74, 0.25);

  /* Snap preview — adjusted for light bg */
  --color-snap-bg-neutral: rgba(135, 137, 192, 0.08);

  /* Block palette colors — light mode */
  --color-block-action: #45F0DF;
  --color-block-action-hover: #5FF8E9;
  --color-block-text-action: #00201D;
  --color-block-control: #d7d9e6;
  --color-block-control-hover: #c6c5d0;
  --color-block-text-control: #111d4a;
  --color-block-event: #d7d9e6;
  --color-block-event-hover: #c6c5d0;

  /* Clear/danger button tokens */
  --color-clear-btn-bg: transparent;
  --color-clear-btn-border: var(--color-error);
  --color-clear-btn-hover-bg: var(--color-error);
  --color-clear-btn-hover-border: var(--color-error);

  /* Card tokens — light mode */
  --color-card-bg: #f0f2ff;
  --color-card-text-title: #111d4a;
  --color-card-text-body: rgba(17, 29, 74, 0.7);
  --color-card-progress-bg: #d7d9e6;
  --color-card-progress-fill-start: #45F0DF;
  --color-card-progress-fill-end: #8789C0;
  --color-card-icon: #8789C0;
  --color-card-counter: #8789C0;

  /* Secondary actions — darker shade for visibility on light bg */
  --color-secondary-alt: #8789c0;

  /* Game entity colors — light mode */
  --color-snake-body: #00d5c5;
  --color-apple: #ff6b6b;
  --color-apple-glow: rgba(255, 107, 107, 0.3);
  --color-spike: #767680;
  --color-apple-stem: #4a2828;
  --color-apple-highlight: rgba(255, 255, 255, 0.3);
  --color-run-shadow: #00332e;
  --color-pause-text: #111d4a;
  --color-shadow-pure: #111d4a;
  --color-card-icon: #4a90e2;
  --color-card-border: rgba(74, 144, 226, 0.2);
}