/* ==========================================================================
   SEA-SENSE Design System — CSS Custom Properties
   Derived from docs/design/variables.css
   ========================================================================== */

:root {
    /* Colors — Primary (Deep Teal) */
    --color-primary:             #0B5E6F;
    --color-primary-dark:        #094250;
    --color-primary-light:       #E8F4F6;

    /* Colors — Secondary (Sea Green) */
    --color-secondary:           #1A7A6C;
    --color-secondary-dark:      #145E53;
    --color-secondary-light:     #E6F5F1;

    /* Colors — Neutral */
    --color-neutral-900:         #1B2028;
    --color-neutral-800:         #2D333D;
    --color-neutral-700:         #3D4554;
    --color-neutral-600:         #535C6B;
    --color-neutral-500:         #6B7280;
    --color-neutral-400:         #9CA3AF;
    --color-neutral-300:         #D1D5DB;
    --color-neutral-200:         #E5E7EB;
    --color-neutral-100:         #F3F4F6;
    --color-neutral-50:          #F9FAFB;
    --color-white:               #FFFFFF;

    /* Semantic aliases used by site.css */
    --color-text:                var(--color-neutral-900);
    --color-text-light:          var(--color-neutral-600);
    --color-bg:                  var(--color-white);
    --color-bg-alt:              var(--color-neutral-100);
    --color-border:              var(--color-neutral-200);

    /* Colors — Semantic */
    --color-success:             #15803D;
    --color-success-light:       #DCFCE7;
    --color-warning:             #B45309;
    --color-warning-light:       #FEF3C7;
    --color-error:               #B91C1C;
    --color-error-light:         #FEE2E2;

    /* Colors — EU Blue */
    --color-eu-blue:             #003399;
    --color-eu-blue-light:       #E8EDF7;

    /* Typography — Families */
    --font-family-base:          'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-family-heading:       'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

    /* Typography — Sizes (Major Third scale) */
    --font-size-4xl:             2.441rem;   /* ~39px — Hero h1       */
    --font-size-3xl:             1.953rem;   /* ~31px — Page h1       */
    --font-size-2xl:             1.563rem;   /* ~25px — Section h2    */
    --font-size-xl:              1.25rem;    /*  20px — h3, card title */
    --font-size-lg:              1.125rem;   /*  18px — lead text     */
    --font-size-base:            1rem;       /*  16px — body          */
    --font-size-sm:              0.875rem;   /*  14px — captions      */
    --font-size-xs:              0.75rem;    /*  12px — legal         */

    /* Typography — Weights */
    --font-weight-normal:        400;
    --font-weight-medium:        500;
    --font-weight-semibold:      600;
    --font-weight-bold:          700;

    /* Typography — Line Heights */
    --line-height-heading:       1.2;
    --line-height-snug:          1.3;
    --line-height-base:          1.6;
    --line-height-relaxed:       1.75;

    /* Spacing (8px grid) */
    --space-xs:                  0.25rem;    /*  4px  */
    --space-sm:                  0.5rem;     /*  8px  */
    --space-md:                  1rem;       /* 16px  */
    --space-lg:                  1.5rem;     /* 24px  */
    --space-xl:                  2rem;       /* 32px  */
    --space-2xl:                 3rem;       /* 48px  */
    --space-3xl:                 4rem;       /* 64px  */
    --space-4xl:                 6rem;       /* 96px  */

    /* Layout */
    --container-max:             72rem;      /* 1152px */
    --container-padding:         1.5rem;     /*   24px */
    --content-max:               48rem;      /*  768px — prose blocks */

    /* Borders */
    --radius-sm:                 0.25rem;    /*  4px  */
    --radius-md:                 0.5rem;     /*  8px  */
    --radius-lg:                 0.75rem;    /* 12px  */
    --radius-full:               9999px;

    --border-width:              1px;

    /* Shadows */
    --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 -2px rgba(0, 0, 0, 0.1);
    --shadow-lg:                 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --shadow-header:             0 1px 3px 0 rgba(0, 0, 0, 0.08);

    /* Transitions */
    --transition-fast:           150ms ease;
    --transition-base:           250ms ease;
    --transition-slow:           350ms ease;

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

    /* Gradients */
    --gradient-hero:             linear-gradient(135deg, #0B5E6F 0%, #1A7A6C 50%, #094250 100%);
    --gradient-cta:              linear-gradient(135deg, #094250 0%, #0B5E6F 100%);
    --gradient-card-hover:       linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-secondary-light) 100%);

    /* Additional shadows */
    --shadow-xl:                 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    --shadow-card-hover:         0 12px 24px -4px rgba(11, 94, 111, 0.15), 0 4px 8px -2px rgba(11, 94, 111, 0.08);
    --shadow-glow:               0 0 20px rgba(11, 94, 111, 0.15);
}