/**
 * @file theme.css
 * adesso Theme Design Tokens (CSS Custom Properties)
 *
 * Based on adesso Corporate Design Styleguide (June 2025).
 * All colors converted to OKLch for perceptual uniformity.
 *
 * Hausfarben:
 *   adesso-Blau: #006ec7 (RGB 0, 110, 199) → oklch(0.509 0.149 250.644)
 *   adesso-Grau: #887d75 (RGB 136, 125, 117) → oklch(0.583 0.016 51.707)
 *
 * Schmuckfarben:
 *   Yellow: #ffff00 → oklch(0.975 1.765 116.555)
 *   Orange: #ff9868 → oklch(0.765 0.729 45.296)
 *   Pink: #f566ba → oklch(0.687 1.004 339.536)
 *   Violet: #461ebe → oklch(0.390 0.921 290.105)
 *   Turquoise: #28dcaa → oklch(0.817 1.052 171.514)
 *   Green: #76c800 → oklch(0.767 1.140 138.313)
 *
 * WCAG Note: adesso-Grau on white background = 3.35:1 (fails AA).
 * Use darker shades (70%+) or adesso-Blau for accessible text.
 */

:root {
  /* ========================================
   * Hausfarben (Primary Brand Colors)
   * ======================================== */
  --color-brand-blue: oklch(0.509 0.149 250.644);     /* adesso-Blau #006ec7 - Primary brand color */
  --color-brand-gray: oklch(0.583 0.016 51.707);      /* adesso-Grau #887d75 - Secondary brand color */
  --color-brand-gray-10: oklch(0.95 0.016 51.707);    /* adesso-Grau 10% - Light backgrounds */
  --color-brand-gray-70: oklch(0.45 0.016 51.707);    /* adesso-Grau 70% - Accessible text */
  --color-brand-gray-90: oklch(0.3 0.016 51.707);     /* adesso-Grau 90% - Dark text */

  /* ========================================
   * Schmuckfarben (Accent Colors)
   * ======================================== */
  --color-accent-yellow: oklch(0.975 1.765 116.555);  /* #ffff00 - Highlights, Badges */
  --color-accent-orange: oklch(0.765 0.729 45.296);   /* #ff9868 - Warnings, secondary CTAs */
  --color-accent-pink: oklch(0.687 1.004 339.536);    /* #f566ba - Decorative elements */
  --color-accent-violet: oklch(0.390 0.921 290.105);  /* #461ebe - Categories, Tags */
  --color-accent-turquoise: oklch(0.817 1.052 171.514); /* #28dcaa - Success, Confirmations */
  --color-accent-green: oklch(0.767 1.140 138.313);   /* #76c800 - Status, Progress */

  /* ========================================
   * Semantic UI Colors (Light Scheme)
   * ======================================== */
  --background: oklch(1 0 0);                          /* White background */
  --foreground: var(--color-brand-gray-90);            /* adesso-Grau 90% for text */
  --card: oklch(0.98 0 0);                             /* Off-white card background */
  --card-foreground: var(--foreground);
  --primary: var(--color-brand-blue);                  /* adesso-Blau for primary actions */
  --primary-foreground: oklch(1 0 0);                  /* White text on blue */
  --secondary: var(--color-brand-gray);                /* adesso-Grau for secondary actions */
  --secondary-foreground: oklch(1 0 0);                /* White text on gray */
  --muted: var(--color-brand-gray-10);                 /* Light background for muted sections */
  --muted-foreground: var(--color-brand-gray-70);      /* Accessible gray for muted text */
  --accent: var(--color-brand-blue);                   /* adesso-Blau for accents */
  --accent-foreground: oklch(1 0 0);                   /* White text on blue accent */
  --destructive: oklch(0.6368 0.2078 25.3313);         /* Red for errors */
  --destructive-foreground: oklch(1 0 0);              /* White text on red */
  --border: oklch(0.85 0 0);                           /* Light gray borders */
  --input: oklch(0.85 0 0);                            /* Light gray input borders */
  --ring: var(--color-brand-blue);                     /* Focus ring color (adesso-Blau) */

  /* ========================================
   * Typography Tokens
   * ======================================== */
  /* Default Font Stack (Fira Sans - Free, Google Fonts) */
  --font-sans: "Fira Sans", "Helvetica Neue", Arial, Helvetica, sans-serif;
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono: "Fira Mono", "Menlo", "Consolas", "Liberation Mono", monospace;

  /* Semantic Font Tokens */
  --font-heading: var(--font-sans);                    /* Headlines, Ueberschriften */
  --font-body: var(--font-sans);                       /* Fliesstext, UI-Elemente */

  /* Premium Font Stack (Klavika/ABC Marist - adesso License Required) */
  --font-heading-premium: "Klavika", var(--font-sans); /* Premium upgrade path for headlines */
  --font-body-premium: "ABC Marist", var(--font-sans); /* Premium upgrade path for body text */

  /* ========================================
   * Icon Tokens
   * ======================================== */
  --icon-style: "Phosphor Thin";                       /* Phosphor Icons library (thin/outline style only) */
  --icon-color-primary: var(--color-brand-blue);       /* Icons in adesso-Blau #006ec7 */
  --icon-color-secondary: var(--color-brand-gray);     /* Icons in adesso-Grau #887d75 */
  --icon-stroke-width: 1px;                            /* Consistent stroke width for outlined icons */

  /* ========================================
   * Gradient Tokens (Blue-Anchored)
   * ======================================== */
  --gradient-blue-turquoise: linear-gradient(135deg, var(--color-brand-blue) 0%, var(--color-accent-turquoise) 100%);
  --gradient-blue-violet: linear-gradient(135deg, var(--color-brand-blue) 0%, var(--color-accent-violet) 100%);
  --gradient-blue-green: linear-gradient(135deg, var(--color-brand-blue) 0%, var(--color-accent-green) 100%);
  --gradient-blue-orange: linear-gradient(135deg, var(--color-brand-blue) 0%, var(--color-accent-orange) 100%);

  /* ========================================
   * Layout & Styling Tokens
   * ======================================== */
  --radius: 0.5rem;
  --shadow-x: 0;
  --shadow-y: 1px;
  --shadow-blur: 3px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.1;
  --shadow-color: oklch(0 0 0);
  --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
  --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
  --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
  --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
  --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
  --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);

  /* Set navbar height for hero billboard overlay */
  --navbar-height: calc(var(--spacing) * 16);

  @media (min-width: 768px) {
    --navbar-height: calc(var(--spacing) * 22);
  }
}