/* app/static/css/base/variables.css */
/* Defines foundational default values for CSS Custom Properties. */
/* These are often overridden by themes and modes. */

:root {
  /* ------------------------- */
  /* Palette (Raw Colors)      */
  /* ------------------------- */
  /* Use descriptive names for raw colors */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-gray-100: #f8f9fa; /* Lightest */
  --color-gray-200: #e9ecef;
  --color-gray-300: #dee2e6;
  --color-gray-400: #ced4da;
  --color-gray-500: #adb5bd;
  --color-gray-600: #6c757d;
  --color-gray-700: #495057;
  --color-gray-800: #343a40;
  --color-gray-900: #212529; /* Darkest */

  /* Base semantic colors (can be raw or other vars) */
  --color-blue-500: #0d6efd; /* Example base blue */
  --color-indigo-500: #6610f2;
  --color-purple-500: #6f42c1;
  --color-pink-500: #d63384;
  --color-red-500: #dc3545;
  --color-orange-500: #fd7e14;
  --color-yellow-500: #ffc107;
  --color-green-500: #198754;
  --color-teal-500: #20c997;
  --color-cyan-500: #0dcaf0;

  /* ------------------------- */
  /* Semantic Colors (Usage)   */
  /* ------------------------- */
  /* These define purpose and are typically overridden by themes/modes */
  --color-background: var(--color-white); /* Default page background */
  --color-text-primary: var(--color-gray-900); /* Main text color */
  --color-text-secondary: var(
    --color-gray-700
  ); /* Secondary text (e.g., meta) */
  --color-text-muted: var(--color-gray-600); /* Muted text */
  --color-link: var(--color-blue-500); /* Standard link color */
  --color-link-hover: var(
    --color-blue-500
  ); /* Link hover (often darker/lighter) */
  --color-border: var(--color-gray-300); /* Default border color */
  --color-accent: var(--color-blue-500); /* Primary accent/action color */
  --color-primary: var(--color-blue-500); /* Often same as accent */
  --color-secondary: var(--color-gray-600); /* Secondary actions/info */

  /* Surface colors for elements on top of the main background */
  --color-surface-1: var(--color-white); /* Default surface (e.g., cards) */
  --color-surface-2: var(--color-gray-100); /* Slightly different surface */
  --color-surface-3: var(--color-gray-200); /* Yet another surface */

  /* Feedback colors */
  --color-success: var(--color-green-500);
  --color-warning: var(--color-yellow-500);
  --color-danger: var(--color-red-500);
  --color-info: var(--color-cyan-500);

  /* ------------------------- */
  /* Typography                */
  /* ------------------------- */
  --font-family-sans: system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-family-serif: Georgia, Cambria, "Times New Roman", Times, serif;
  --font-family-mono: SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;

  /* Base font settings (can be overridden by themes) */
  --font-family-base: var(--font-family-sans);
  --font-family-heading: var(--font-family-sans); /* Default headings to base */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-bold: 700;
  --font-size-root: 16px; /* Base for rem units */
  --font-size-xs: 0.5rem; /* 8px */
  --font-size-sm: 0.875rem; /* 14px */
  --font-size-md: 1rem; /* 16px (base body size) */
  --font-size-lg: 1.125rem; /* 18px */
  --font-size-xl: 1.25rem; /* 20px */
  --font-size-2xl: 1.5rem; /* 24px */
  --font-size-3xl: 1.875rem; /* 30px */
  --font-size-4xl: 2.25rem; /* 36px */
  /* Add more sizes as needed */

  --line-height-base: 1.6;
  --line-height-heading: 1.2;

  /* ------------------------- */
  /* Spacing & Sizing          */
  /* ------------------------- */
  /* Use a consistent scale (e.g., 4px or 8px based) */
  --spacing-xs: 0.25rem; /* 4px */
  --spacing-sm: 0.5rem; /* 8px */
  --spacing-md: 1rem; /* 16px */
  --spacing-lg: 1.5rem; /* 24px */
  --spacing-xl: 2rem; /* 32px */
  --spacing-xxl: 3rem; /* 48px */

  --container-max-width: 1200px; /* Example max width for centered content */
  --container-padding-x: var(--spacing-md);

  /* ------------------------- */
  /* Borders & Radius          */
  /* ------------------------- */
  --border-width-default: 1px;
  --border-radius-sm: 0.2rem;
  --border-radius-md: 0.375rem;
  --border-radius-lg: 0.5rem;
  --border-radius-xl: 0.75rem;
  --border-radius-pill: 50rem; /* For pill shapes */

  /* ------------------------- */
  /* Shadows                   */
  /* ------------------------- */
  /* Defaults for light mode (often subtle or none) */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);

  /* ------------------------- */
  /* Transitions               */
  /* ------------------------- */
  --transition-duration-default: 0.15s;
  --transition-timing-function-default: ease-in-out;
  --transition-property-common: background-color, border-color, color, fill,
    stroke, opacity, box-shadow, transform;

  /* ------------------------- */
  /* Z-Index                   */
  /* ------------------------- */
  --z-index-dropdown: 1000;
  --z-index-sticky: 1020;
  --z-index-modal-backdrop: 1040;
  --z-index-modal: 1050;
  --z-index-popover: 1060;
  --z-index-tooltip: 1070;

  /* ------------------------- */
  /* Component Defaults        */
  /* ------------------------- */
  /* Define base variables for common components */

  /* Card */
  --card-padding: var(--spacing-md);
  --card-background: var(--color-surface-1);
  --card-border-color: var(--color-border);
  --card-border-width: var(--border-width-default);
  --card-border-radius: var(--border-radius-md);
  --card-box-shadow: var(--shadow-sm);
  --card-color: var(--color-text-primary);
  --card-title-color: inherit; /* Inherit from card color by default */
  --card-title-font-size: var(--font-size-lg);
  --card-image-aspect-ratio: 16 / 9; /* Default aspect ratio for card images */

  /* Button */
  --button-padding-y: var(--spacing-sm);
  --button-padding-x: var(--spacing-md);
  --button-font-family: var(--font-family-base);
  --button-font-size: var(--font-size-md);
  --button-line-height: var(--line-height-base);
  --button-border-radius: var(--border-radius-md);
  --button-border-width: var(--border-width-default);
  --button-transition: color var(--transition-duration-default)
      var(--transition-timing-function-default),
    background-color var(--transition-duration-default)
      var(--transition-timing-function-default),
    border-color var(--transition-duration-default)
      var(--transition-timing-function-default),
    box-shadow var(--transition-duration-default)
      var(--transition-timing-function-default);

  /* Primary Button */
  --button-primary-background: var(--color-primary);
  --button-primary-color: var(--color-white);
  --button-primary-border-color: var(--color-primary);
  --button-primary-background-hover: var(
    --color-blue-500
  ); /* Example: Darken slightly */
  --button-primary-border-color-hover: var(
    --color-blue-500
  ); /* Example: Darken slightly */

  /* Header */
  --header-height: 60px; /* Example */
  --header-background: var(--color-surface-1);
  --header-color: var(--color-text-primary);
  --header-border-color: var(--color-border);
  --header-box-shadow: var(--shadow-sm);

  /* Footer */
  --footer-background: var(--color-surface-2);
  --footer-color: var(--color-text-secondary);
  --footer-padding-y: var(--spacing-lg);
  --footer-border-color: var(--color-border);

  /* Add other component defaults as needed */
}