/* Personal site theme (clementincastellano.com).

   Every site defines the same variable names (see lib/ui/theme.ml); only the
   values differ. Optional site-specific overrides go at the end of the file. */

:root {
  /* ===== COLORS ===== */
  
  /* Backgrounds */
  --color-bg-1: #efe6eaff;
  --color-bg-2: #e7dae0ff;
  --color-bg-3: #cfb4c0ff;

  /* Main colors */
  --color-primary: #08415cff;
  --color-secondary: #cc2936ff;
  --color-tertiary: #5fb49cff;

  /* Light variants */
  --color-primary-100: #0b5d83ff;
  --color-primary-200: #0f78a9ff;
  --color-secondary-100: #da4450ff;
  --color-secondary-200: #e16670ff;
  --color-tertiary-100: #6ebba5ff;
  --color-tertiary-200: #7bc1adff;

  /* Texts */
  --color-text-dark: black;
  --color-text-light: white;

  /* ===== TYPOGRAPHY ===== */
  
  /* Font family */
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;

  /* Font sizes */
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-xxl: 1.5rem;
  --font-size-xxxl: 2rem;

  /* Font weights */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  /* Line heights */
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-loose: 1.8;

  /* ===== BORDERS ===== */
  
  /* Border radius */
  --border-radius-sm: 0.25rem;
  --border-radius-md: 0.5rem;
  --border-radius-lg: 0.75rem;
  --border-radius-xl: 1rem;
  --border-radius-full: 9999px;

  /* Border width */
  --border-width-thin: 1px;
  --border-width-normal: 2px;
  --border-width-thick: 4px;

  /* Border colors */
  --border-color-light: rgba(0, 0, 0, 0.1);
  --border-color: rgba(0, 0, 0, 0.2);
  --border-color-dark: rgba(0, 0, 0, 0.3);

  /* ===== SPACING ===== */
  
  --spacing-unit: 0.25rem;
  --spacing-xs: calc(1 * var(--spacing-unit));
  --spacing-sm: calc(2 * var(--spacing-unit));
  --spacing-md: calc(3 * var(--spacing-unit));
  --spacing-lg: calc(4 * var(--spacing-unit));
  --spacing-xl: calc(6 * var(--spacing-unit));
  --spacing-xxl: calc(8 * var(--spacing-unit));
  --spacing-xxxl: calc(12 * var(--spacing-unit));

  /* ===== SHADOWS ===== */
  
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
  --shadow-primary: 0 4px 12px rgba(8, 65, 92, 0.15);
  --shadow-secondary: 0 4px 12px rgba(204, 41, 54, 0.15);
  --shadow-tertiary: 0 4px 12px rgba(95, 180, 156, 0.15);

  /* ===== TRANSITIONS ===== */
  
  --transition-duration-fast: 150ms;
  --transition-duration-normal: 250ms;
  --transition-duration-slow: 400ms;
  --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);

  /* ===== BUTTONS ===== */
  
  /* Heights */
  --button-height-sm: 2rem;
  --button-height-md: 2.5rem;
  --button-height-lg: 3rem;

  /* Padding */
  --button-padding-x-sm: 0.75rem;
  --button-padding-x-md: 1rem;
  --button-padding-x-lg: 1.5rem;
  --button-padding-y-sm: 0.5rem;
  --button-padding-y-md: 0.75rem;
  --button-padding-y-lg: 1rem;

  /* Typography */
  --button-font-size-sm: var(--font-size-sm);
  --button-font-size-md: var(--font-size-base);
  --button-font-size-lg: var(--font-size-lg);
  --button-font-weight: var(--font-weight-medium);

  /* Borders */
  --button-border-radius: var(--border-radius-md);
  --button-border-width: var(--border-width-thin);

  /* ===== FORMS ===== */
  
  /* Input heights */
  --form-input-height-sm: 2rem;
  --form-input-height-md: 2.5rem;
  --form-input-height-lg: 3rem;

  /* Input padding */
  --form-input-padding-x: 0.75rem;
  --form-input-padding-y: 0.5rem;

  /* Input borders */
  --form-input-border-width: var(--border-width-thin);
  --form-input-border-radius: var(--border-radius-sm);
  --form-input-border-color: var(--border-color);
  --form-input-background: var(--color-bg-3);

  /* Input typography */
  --form-input-font-size: var(--font-size-base);

  /* Form layout */
  --form-label-margin-bottom: var(--spacing-sm);
  --form-gap: var(--spacing-md);

  /* Focus states */
  --form-focus-border-color: var(--color-primary);
  --form-focus-box-shadow: 0 0 0 3px rgba(8, 65, 92, 0.2);

  /* ===== Z-INDEX ===== */
  
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;

  /* ===== MISCELLANEOUS ===== */
  
  /* Opacity */
  --opacity-disabled: 0.5;
  --opacity-hover: 0.8;
  --opacity-active: 0.9;

  /* Focus */
  --focus-outline-width: 2px;
  --focus-outline-offset: 2px;
  --focus-outline-color: var(--color-primary);

  /* Selection */
  --selection-color: var(--color-primary);
  --selection-opacity: 0.2;
}