@import url("https://use.typekit.net/dhn1tag.css");

/* ==========================================================================
   COPENHAGEN SOLUTIONS - DESIGN SYSTEM TOKENS (Nórdica Institucional)
   ========================================================================== */

:root {
    /* 🎨 Colors */
    --color-deep-navy: #002147;
    --color-deep-navy-rgb: 0, 33, 71;
    --color-matte-gold: #C5A059;
    --color-matte-gold-rgb: 197, 160, 89;
    --color-matte-gold-hover: #B59049;
    --color-sage-equilibrium: #87A98D;
    --color-sage-equilibrium-rgb: 135, 169, 141;
    --color-warm-off-white: #F9F7F2;
    --color-warm-off-white-bright: #FBF9F4;
    
    /* Functional Colors */
    --color-background: var(--color-warm-off-white);
    --color-surface: var(--color-warm-off-white-bright);
    --color-surface-dim: #EAE8E3;
    
    --color-primary: var(--color-deep-navy);
    --color-on-primary: #FFFFFF;
    --color-secondary: var(--color-matte-gold);
    --color-on-secondary: var(--color-deep-navy);
    --color-tertiary: var(--color-sage-equilibrium);
    --color-on-tertiary: #FFFFFF;
    
    --color-text-main: #1B1C19;
    --color-text-muted: #585A55;
    --color-text-light: #8E918B;
    
    --color-border-subtle: #E4E2DD;
    --color-border-medium: #C8C6C0;
    --color-border-focus: var(--color-matte-gold);
    
    --color-error: #BA1A1A;
    --color-success: #2E7D32;
    
    /* ✍️ Typography */
    --font-serif: "futura-pt", Futura, "Trebuchet MS", Arial, sans-serif;
    --font-sans: "futura-pt", Futura, "Trebuchet MS", Arial, sans-serif;
    
    /* Font Sizes & Line Heights (AIP/Fluid or Static Design DNA) */
    --font-size-display-lg: 3.5rem;   /* 56px */
    --line-height-display-lg: 1.1;
    --letter-spacing-display-lg: -0.02em;
    --weight-display-lg: 700;
    
    --font-size-headline-lg: 2.5rem;  /* 40px */
    --line-height-headline-lg: 1.2;
    --weight-headline-lg: 600;
    
    --font-size-headline-lg-mobile: 2rem; /* 32px */
    
    --font-size-headline-md: 2rem;    /* 32px */
    --line-height-headline-md: 1.3;
    --weight-headline-md: 500;
    
    --font-size-body-lg: 1.125rem;    /* 18px */
    --line-height-body-lg: 1.6;
    --weight-body-lg: 400;
    
    --font-size-body-md: 1rem;        /* 16px */
    --line-height-body-md: 1.6;
    --weight-body-md: 400;
    
    --font-size-label-md: 0.875rem;    /* 14px */
    --line-height-label-md: 1.2;
    --letter-spacing-label-md: 0.05em;
    --weight-label-md: 600;
    
    /* 📐 Shapes & Border Radius */
    --radius-none: 0px;
    --radius-sm: 2px;
    --radius-default: 4px;            /* 0.25rem - Base Design DNA */
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-full: 9999px;
    
    /* 🚀 Spacing & Layout */
    --spacing-unit: 8px;
    
    --spacing-xs: calc(var(--spacing-unit) * 0.5); /* 4px */
    --spacing-sm: calc(var(--spacing-unit) * 1.5); /* 12px */
    --spacing-md: calc(var(--spacing-unit) * 3);   /* 24px */
    --spacing-lg: calc(var(--spacing-unit) * 6);   /* 48px */
    --spacing-xl: calc(var(--spacing-unit) * 10);  /* 80px */
    
    --grid-columns: 12;
    --grid-gutter: 1.5rem;                         /* 24px */
    --margin-desktop: 2.5rem;                      /* 40px */
    --margin-mobile: 1rem;                         /* 16px */
    
    --section-padding-desktop: 5rem;               /* 80px */
    --section-padding-mobile: 3.5rem;              /* 56px */
    
    /* ⚡ Transitions & Micro-interactions */
    --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* 🌁 Shadows & Elevation */
    /* Diffused shadow using Navy with 4% opacity */
    --shadow-service-card: 0 8px 30px rgba(0, 33, 71, 0.04);
    --shadow-header: 0 2px 20px rgba(0, 33, 71, 0.02);
    --shadow-focus: 0 0 0 3px rgba(197, 160, 89, 0.3);
}