/* ============================================================
   PHOTODAY — Colors & Typography CSS Variables
   Sources: photoday.website, brand logo, LinkedIn assets
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,700&display=swap');

/* ── Brand Display Font: GC Nexora ─────────────── */
@font-face {
  font-family: 'GC Nexora';
  src: url('../fonts/GCNexora-Bold.otf') format('opentype'),
       url('../fonts/GCNexora-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'GC Nexora';
  src: url('../fonts/GCNexora-Medium.otf') format('opentype'),
       url('../fonts/GCNexora-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ── Brand Display Font: GCarturm ───────────────── */
@font-face { font-family: 'GCarturm'; src: url('../fonts/GCarturm-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'GCarturm'; src: url('../fonts/GCarturm-Medium.ttf') format('truetype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'GCarturm'; src: url('../fonts/GCarturm-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'GCarturm'; src: url('../fonts/GCarturm-Thin.ttf') format('truetype'); font-weight: 100; font-display: swap; }

/* ── Brand Body Font: Aburo ─────────────────────── */
@font-face { font-family: 'Aburo'; src: url('../fonts/Aburo-Thin.ttf') format('truetype'); font-weight: 100; font-display: swap; }
@font-face { font-family: 'Aburo'; src: url('../fonts/Aburo-Extralight.ttf') format('truetype'); font-weight: 200; font-display: swap; }
@font-face { font-family: 'Aburo'; src: url('../fonts/Aburo-Light.ttf') format('truetype'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Aburo'; src: url('../fonts/Aburo-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Aburo'; src: url('../fonts/Aburo-Medium.ttf') format('truetype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Aburo'; src: url('../fonts/Aburo-Semibold.ttf') format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Aburo'; src: url('../fonts/Aburo-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }

/* ── Base Color Tokens ─────────────────────────────────────── */
:root {
  /* Brand */
  --color-teal-50:  #e8faf7;
  --color-teal-100: #c0f1ea;
  --color-teal-200: #84e5d9;
  --color-teal-300: #3dd6c4;
  --color-teal-400: #2ecbb1;   /* Primary — logo icon teal */
  --color-teal-500: #1fb89e;
  --color-teal-600: #18a08a;
  --color-teal-700: #108070;
  --color-teal-800: #0a5f54;
  --color-teal-900: #053d36;

  /* Navy */
  --color-navy-50:  #eef0f7;
  --color-navy-100: #c8ceea;
  --color-navy-200: #8f9bc8;
  --color-navy-300: #5a6aa6;
  --color-navy-400: #2e4183;
  --color-navy-500: #162347;   /* Mid navy */
  --color-navy-600: #0f1a38;
  --color-navy-700: #0d1b3e;   /* Primary dark bg — LinkedIn post */
  --color-navy-800: #091228;
  --color-navy-900: #040a18;

  /* Neutrals */
  --color-white:    #ffffff;
  --color-gray-50:  #f7f9fc;
  --color-gray-100: #eef1f6;
  --color-gray-200: #dde2ed;
  --color-gray-300: #b8c0d4;
  --color-gray-400: #8d98b3;
  --color-gray-500: #636e87;
  --color-gray-600: #44506a;
  --color-gray-700: #2c3550;
  --color-gray-800: #1c2236;
  --color-gray-900: #0f1420;

  /* ── Semantic Tokens ──────────────────────────────────────── */
  --color-brand-primary:   var(--color-teal-400);
  --color-brand-primary-dark: var(--color-teal-600);
  --color-brand-dark:      var(--color-navy-700);
  --color-brand-dark-alt:  var(--color-navy-500);

  --color-bg-page:         var(--color-white);
  --color-bg-dark:         var(--color-navy-700);
  --color-bg-subtle:       var(--color-gray-50);
  --color-bg-teal-wash:    var(--color-teal-50);

  --color-fg-primary:      var(--color-gray-900);
  --color-fg-secondary:    var(--color-gray-600);
  --color-fg-muted:        var(--color-gray-400);
  --color-fg-on-dark:      var(--color-white);
  --color-fg-accent:       var(--color-teal-400);

  --color-border:          var(--color-gray-200);
  --color-border-strong:   var(--color-gray-300);

  /* ── Gamer Accent Palette ───────────────────────────────── */
  --color-neon-pink:   #FF2E63;
  --color-lime-shock:  #C6FF00;
  --color-violet:      #8B5CF6;
  --color-amber:       #FF9800;
  --color-void:        #0A0E1F;

  /* ── Brand Gradients ───────────────────────────────────── */
  --grad-teal-blue:    linear-gradient(135deg, #2ecbb1 0%, #2563eb 100%);
  --grad-teal-violet:  linear-gradient(135deg, #2ecbb1 0%, #8B5CF6 100%);
  --grad-navy-teal:    linear-gradient(135deg, #0d1b3e 0%, #2ecbb1 100%);
  --grad-pink-amber:   linear-gradient(135deg, #FF2E63 0%, #FF9800 100%);
  --grad-void-violet:  linear-gradient(135deg, #0A0E1F 0%, #8B5CF6 100%);

  /* Status */
  --color-success:  #22c55e;
  --color-warning:  #f59e0b;
  --color-error:    #ef4444;
  --color-info:     var(--color-teal-400);

  /* ── Typography Tokens ────────────────────────────────────── */
  --font-sans:     'Aburo', 'Montserrat', sans-serif;
  --font-display:  'GCarturm', 'Aburo', sans-serif;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extrabold:800;
  --fw-black:    900;

  --fs-xs:   0.75rem;    /* 12px */
  --fs-sm:   0.875rem;   /* 14px */
  --fs-base: 1rem;       /* 16px */
  --fs-md:   1.125rem;   /* 18px */
  --fs-lg:   1.25rem;    /* 20px */
  --fs-xl:   1.5rem;     /* 24px */
  --fs-2xl:  1.875rem;   /* 30px */
  --fs-3xl:  2.25rem;    /* 36px */
  --fs-4xl:  3rem;       /* 48px */
  --fs-5xl:  3.75rem;    /* 60px */
  --fs-6xl:  4.5rem;     /* 72px */

  --lh-tight:  1.1;
  --lh-snug:   1.25;
  --lh-normal: 1.5;
  --lh-relaxed:1.75;

  --ls-tight:  -0.02em;
  --ls-normal:  0;
  --ls-wide:    0.05em;
  --ls-widest:  0.15em;

  /* ── Spacing & Radius ─────────────────────────────────────── */
  --space-1:  0.25rem;   /* 4px  */
  --space-2:  0.5rem;    /* 8px  */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */

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

  /* ── Shadows ──────────────────────────────────────────────── */
  --shadow-sm:  0 1px 3px rgba(13,27,62,0.08), 0 1px 2px rgba(13,27,62,0.04);
  --shadow-md:  0 4px 16px rgba(13,27,62,0.10), 0 2px 6px rgba(13,27,62,0.06);
  --shadow-lg:  0 8px 32px rgba(13,27,62,0.14), 0 4px 12px rgba(13,27,62,0.08);
  --shadow-xl:  0 16px 48px rgba(13,27,62,0.18), 0 8px 20px rgba(13,27,62,0.10);
  --shadow-teal: 0 4px 20px rgba(46,203,177,0.30);
}

/* ── Semantic Element Defaults ────────────────────────────── */
body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--color-fg-primary);
  background: var(--color-bg-page);
  -webkit-font-smoothing: antialiased;
}
h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--fs-5xl);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--color-fg-primary);
  text-transform: uppercase;
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--fs-4xl);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--color-fg-primary);
  text-transform: uppercase;
}

h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 500;
  line-height: var(--lh-snug);
  color: var(--color-fg-primary);
}

h4, .h4 {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 500;
  line-height: var(--lh-snug);
  color: var(--color-fg-primary);
}

p, .body {
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--color-fg-secondary);
}

.label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-fg-accent);
}

.caption {
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  color: var(--color-fg-muted);
}

code, .mono {
  font-family: 'Courier New', Courier, monospace;
  font-size: var(--fs-sm);
  background: var(--color-gray-100);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}