/* ============================================================
   CONVERGE RADIANCE — DESIGN SYSTEM
   CSS Custom Properties (Design Tokens)
   ============================================================ */

/* ── CUSTOM FONT ─────────────────────────────────────────── */
@font-face {
  font-family: 'Recline';
  src: url('../assets/fonts/Recline-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ── DESIGN TOKENS ───────────────────────────────────────── */
:root {

  /* ── BRAND COLORS ─────────────────────────────────────── */
  --color-primary:        #7B3228;   /* warm brown/rust — primary brand */
  --color-primary-dark:   #5C2219;   /* darker rust for hover */
  --color-primary-light:  #A04535;   /* lighter rust for borders */
  --color-primary-pale:   #F2E8E6;   /* near-white rust tint for highlights */

  --color-gold:           #C8941A;   /* amber — taglines, section labels */
  --color-gold-light:     #E8B84B;   /* lighter amber for hover states */
  --color-gold-pale:      #FBF3E1;   /* amber tint for backgrounds */

  --color-pink-accent:    #D4507A;   /* diagonal geometry, decorative lines */

  /* ── BACKGROUNDS ──────────────────────────────────────── */
  --color-bg-cream:       #F5F0E8;   /* primary page background */
  --color-bg-offwhite:    #FDFAF5;   /* card & section alternates */
  --color-bg-white:       #FFFFFF;
  --color-bg-dark:        #1A1008;   /* footer & very dark sections */
  --color-bg-dark-mid:    #2C1A10;   /* secondary dark bg */

  /* ── TEXT ─────────────────────────────────────────────── */
  --color-text-dark:      #1C1C1C;   /* primary body text */
  --color-text-mid:       #4A3F38;   /* secondary body text */
  --color-text-light:     #8C7B72;   /* tertiary / captions */
  --color-text-white:     #FFFFFF;
  --color-text-white-dim: rgba(255, 255, 255, 0.75);

  /* ── CATEGORY COLORS ──────────────────────────────────── */
  /* Cosmetology */
  --color-cosmetology:        #C97A3A;   /* warm orange/terracotta */
  --color-cosmetology-light:  #E8A87C;   /* lighter peach for accents */
  --color-cosmetology-bg:     #FBF0E8;   /* pale cosmetology section bg */
  --color-cosmetology-border: rgba(201, 122, 58, 0.25);

  /* Trichology */
  --color-trichology:         #1A1A1A;   /* near-black (client: black instead of navy) */
  --color-trichology-light:   #3A3A3A;   /* lighter grey for accents */
  --color-trichology-bg:      #ECECEC;   /* pale grey trichology section bg */
  --color-trichology-border:  rgba(26, 26, 26, 0.25);

  /* Dermatology — matched to OFFSHADE brand coral */
  --color-dermatology:        #DE5364;   /* OFFSHADE coral/salmon */
  --color-dermatology-light:  #E97A87;   /* lighter for accents */
  --color-dermatology-bg:     #FCEBED;   /* pale dermatology section bg */
  --color-dermatology-border: rgba(222, 83, 100, 0.25);

  /* ── TYPOGRAPHY ───────────────────────────────────────── */
  --font-display: 'Recline', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;

  /* Type Scale */
  --text-xs:    0.75rem;      /* 12px — labels, captions */
  --text-sm:    0.875rem;     /* 14px — small body, badges */
  --text-base:  1rem;         /* 16px — default body */
  --text-md:    1.125rem;     /* 18px — larger body */
  --text-lg:    1.25rem;      /* 20px — lead paragraphs */
  --text-xl:    1.5rem;       /* 24px — sub-headings */
  --text-2xl:   2rem;         /* 32px — section sub-titles */
  --text-3xl:   2.5rem;       /* 40px — section headings */
  --text-4xl:   3.5rem;       /* 56px — large headings */
  --text-hero:  clamp(2.5rem, 5.5vw, 5rem);   /* responsive hero */

  /* Line Heights */
  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;

  /* Letter Spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.05em;
  --tracking-wider:  0.12em;
  --tracking-widest: 0.2em;

  /* Font Weights */
  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;

  /* ── SPACING ──────────────────────────────────────────── */
  --space-1:   0.25rem;   /*  4px */
  --space-2:   0.5rem;    /*  8px */
  --space-xs:  0.5rem;    /*  8px */
  --space-3:   0.75rem;   /* 12px */
  --space-sm:  1rem;      /* 16px */
  --space-4:   1rem;      /* 16px */
  --space-md:  1.5rem;    /* 24px */
  --space-6:   1.5rem;    /* 24px */
  --space-lg:  2.5rem;    /* 40px */
  --space-10:  2.5rem;    /* 40px */
  --space-xl:  4rem;      /* 64px */
  --space-16:  4rem;      /* 64px */
  --space-2xl: 6rem;      /* 96px */
  --space-24:  6rem;      /* 96px */
  --space-3xl: 8rem;      /* 128px */
  --space-32:  8rem;      /* 128px */

  /* ── BORDERS & RADIUS ─────────────────────────────────── */
  --border-thin:   1px;
  --border-base:   2px;
  --border-thick:  3px;

  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-full: 9999px;

  /* ── SHADOWS ──────────────────────────────────────────── */
  --shadow-xs:    0 1px 3px rgba(123, 50, 40, 0.06);
  --shadow-card:  0 2px 16px rgba(123, 50, 40, 0.08);
  --shadow-hover: 0 8px 32px rgba(123, 50, 40, 0.14);
  --shadow-deep:  0 16px 48px rgba(123, 50, 40, 0.20);
  --shadow-inner: inset 0 2px 8px rgba(123, 50, 40, 0.08);

  /* ── TRANSITIONS ──────────────────────────────────────── */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:    cubic-bezier(0.4, 0, 1, 1);
  --ease-inout: cubic-bezier(0.4, 0, 0.2, 1);

  --duration-fast:  150ms;
  --duration-mid:   300ms;
  --duration-slow:  600ms;
  --duration-xslow: 900ms;

  /* ── LAYOUT ───────────────────────────────────────────── */
  --container-max:    1280px;
  --container-wide:   1440px;
  --container-narrow: 800px;

  --section-pad-v: clamp(3rem, 8vw, 6rem);
  --section-pad-h: clamp(1.25rem, 5vw, 2rem);

  --header-height: 72px;

  /* ── Z-INDEX STACK ────────────────────────────────────── */
  --z-base:    1;
  --z-raised:  5;
  --z-overlay: 10;
  --z-nav:     100;
  --z-modal:   1000;

  /* ── GEOMETRIC MOTIF VALUES ───────────────────────────── */
  /* Hexagon clip-path — used via clip-path: var(--clip-hex) */
  --clip-hex: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);

  /* Diagonal line angle used in hero background */
  --geo-angle: 18deg;
}