@layer reset, base, layout;

:root {
  /* Spacing */
  --inline-space: 1ch;
  --inline-space-half: calc(var(--inline-space) / 2);
  --inline-space-double: calc(var(--inline-space) * 2);
  --block-space: 1rem;
  --block-space-half: calc(var(--block-space) / 2);
  --block-space-double: calc(var(--block-space) * 2);


  --text-xx-small: calc(1rem * 0.55);
  --text-x-small: calc(1rem * 0.75);
  --text-small: calc(1rem * 0.85);
  --text-normal: calc(1rem * 1.0);
  --text-medium: calc(1rem * 1.1);
  --text-large: calc(1rem * 1.5);
  --text-x-large: calc(1rem * 1.8);
  --text-xx-large: calc(1rem * 2.5);

  font-family: InterVariable, sans-serif;
  font-feature-settings: 'liga' 1, 'calt' 1; /* fix for Chrome */

  /* Text */
  --font-sans: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-serif: ui-serif, serif;
  --font-mono: ui-monospace, monospace;


  /* Raw LCH values: Lightness, Chroma, Hue */
  --lch-white: 90% 0.01 255;
  --lch-grey: 90% 0.0 0;
  --lch-coral: 70% 0.14 25;        /* Warm primary - friendly, energetic */
  --lch-mint: 75% 0.12 160;        /* Success/positive - fresh, calming */
  --lch-lavender: 70% 0.10 290;    /* Accent - creative, modern */
  --lch-amber: 75% 0.14 70;        /* Warning - warm, approachable */
  --lch-rose: 65% 0.15 10;         /* Negative - soft, not alarming */
  --lch-sky: 72% 0.08 230;         /* Info - calm, trustworthy */
  --lch-grey-light: 95% 0.0 0;
  --lch-grey-dark: 75% 0.0 0;

  /* Neutrals with warm undertone */
  --lch-ink: 25% 0.02 60;
  --lch-ink-light: 45% 0.01 60;
  --lch-canvas: 98% 0.005 80;
  --lch-canvas-light: 99% 0.005 80;
  --lch-border: 88% 0.01 80;
  --lch-border-light: 95% 0.01 80;
  
  /* Semantic colors */
  --color-primary: oklch(var(--lch-coral));
  --color-secondary: oklch(var(--lch-mint));
  --color-positive: oklch(var(--lch-mint));
  --color-negative: oklch(var(--lch-rose));
  --color-warning: oklch(var(--lch-amber));
  --color-info: oklch(var(--lch-sky));
  --color-accent: oklch(var(--lch-lavender));

  --color-white: oklch(var(--lch-white));
  --color-grey-dark: oklch(var(--lch-grey-dark));
  --color-grey: oklch(var(--lch-grey));
  --color-grey-light: oklch(var(--lch-grey-light));
  
  --color-ink: oklch(var(--lch-ink));
  --color-ink-muted: oklch(var(--lch-ink-light));
  --color-canvas: oklch(var(--lch-canvas));
  --color-border: oklch(var(--lch-border));
  --color-border-light: oklch(var(--lch-border-light));
  
  --color-disabled: #b2b2b2;
  --color-canvas-leight: oklch(var(--lch-canvas-light));

  /* Derived colors using color-mix */
  --color-primary-soft: color-mix(in oklch, var(--color-primary) 12%, var(--color-canvas));
  --color-positive-soft: color-mix(in oklch, var(--color-positive) 15%, var(--color-canvas));
  --color-negative-soft: color-mix(in oklch, var(--color-negative) 12%, var(--color-canvas));

  /* Status colors - semantic states */
  --lch-status-pending: 75% 0.12 70;      /* Amber - waiting, needs attention */
  --lch-status-success: 75% 0.12 160;     /* Mint - completed, matched */
  --lch-status-ignored: 55% 0.02 60;      /* Gray - inactive, skipped */
  --lch-status-error: 65% 0.15 10;        /* Rose - problem, failed */
  --lch-status-info: 72% 0.08 230;        /* Sky - informational */
  --lch-status-draft: 70% 0.10 290;       /* Lavender - work in progress */

  --color-status-pending: oklch(var(--lch-status-pending));
  --color-status-success: oklch(var(--lch-status-success));
  --color-status-ignored: oklch(var(--lch-status-ignored));
  --color-status-error: oklch(var(--lch-status-error));
  --color-status-info: oklch(var(--lch-status-info));
  --color-status-draft: oklch(var(--lch-status-draft));

  /* Soft backgrounds for badges/tags */
  --color-status-pending-soft: color-mix(in oklch, var(--color-status-pending) 15%, var(--color-canvas));
  --color-status-success-soft: color-mix(in oklch, var(--color-status-success) 15%, var(--color-canvas));
  --color-status-ignored-soft: color-mix(in oklch, var(--color-status-ignored) 12%, var(--color-canvas));
  --color-status-error-soft: color-mix(in oklch, var(--color-status-error) 12%, var(--color-canvas));
  --color-status-info-soft: color-mix(in oklch, var(--color-status-info) 15%, var(--color-canvas));
  --color-status-draft-soft: color-mix(in oklch, var(--color-status-draft) 15%, var(--color-canvas));

  /* Account type colors */
  --lch-account-asset: 72% 0.10 230;       /* Sky blue - what you own */
  --lch-account-liability: 65% 0.12 10;    /* Rose - what you owe */
  --lch-account-equity: 70% 0.10 290;      /* Lavender - ownership */
  --lch-account-revenue: 75% 0.12 160;     /* Mint - income */
  --lch-account-expense: 75% 0.12 70;      /* Amber - costs */

  --color-account-asset: oklch(var(--lch-account-asset));
  --color-account-liability: oklch(var(--lch-account-liability));
  --color-account-equity: oklch(var(--lch-account-equity));
  --color-account-revenue: oklch(var(--lch-account-revenue));
  --color-account-expense: oklch(var(--lch-account-expense));

  --color-account-asset-soft: color-mix(in oklch, var(--color-account-asset) 15%, var(--color-canvas));
  --color-account-liability-soft: color-mix(in oklch, var(--color-account-liability) 15%, var(--color-canvas));
  --color-account-equity-soft: color-mix(in oklch, var(--color-account-equity) 15%, var(--color-canvas));
  --color-account-revenue-soft: color-mix(in oklch, var(--color-account-revenue) 15%, var(--color-canvas));
  --color-account-expense-soft: color-mix(in oklch, var(--color-account-expense) 15%, var(--color-canvas));
}


@media (prefers-color-scheme: dark) {
  :root {
    --lch-coral: 75% 0.12 25;
    --lch-mint: 78% 0.10 160;
    --lch-lavender: 75% 0.09 290;
    --lch-amber: 78% 0.12 70;
    --lch-rose: 72% 0.13 10;
    --lch-sky: 76% 0.07 230;
    
    --lch-ink: 92% 0.01 60;
    --lch-ink-light: 70% 0.01 60;
    --lch-canvas: 18% 0.01 60;
    --lch-border: 28% 0.01 60;
  }
}