/* ============================================================
   THE NAKED WIRE — DESIGN SYSTEM
   Version: 1.0
   Foundation: Tokens, Variables, Reset, Base Styles
   ============================================================ */

/* ============================================================
   GOOGLE FONTS IMPORT
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,700&family=Inter:wght@300;400;500;600;700&display=swap');

/* ============================================================
   DESIGN TOKENS — LIGHT MODE (DEFAULT)
   ============================================================ */
:root {
  /* --- Colours --- */
  --color-bg:              #FFFFFF;
  --color-bg-secondary:    #F8F6F1;
  --color-bg-tertiary:     #F0EDE6;
  --color-surface:         #FFFFFF;
  --color-card:            #FFFFFF;
  --color-card-hover:      #FAFAF8;

  --color-text-primary:    #0A0A0A;
  --color-text-secondary:  #4A4A4A;
  --color-text-tertiary:   #787878;
  --color-text-inverse:    #FFFFFF;
  --color-text-muted:      #A0A0A0;

  --color-gold:            #C9A84C;
  --color-gold-light:      #E8D5A3;
  --color-gold-dark:       #A07830;
  --color-charcoal:        #2C2C2C;
  --color-red:             #C0392B;
  --color-red-light:       #FADBD8;

  --color-border:          #E8E4DC;
  --color-border-strong:   #D0CAC0;
  --color-divider:         #F0EDE6;

  --color-success:         #27AE60;
  --color-warning:         #F39C12;
  --color-error:           #C0392B;
  --color-info:            #2980B9;

  --color-overlay:         rgba(0, 0, 0, 0.5);
  --color-overlay-light:   rgba(0, 0, 0, 0.05);

  /* --- Category Badge Colours --- */
  --color-cat-1:           #E8F4FD;
  --color-cat-1-text:      #1A6FA8;
  --color-cat-2:           #FEF9E7;
  --color-cat-2-text:      #B7770D;
  --color-cat-3:           #EAFAF1;
  --color-cat-3-text:      #1E8449;
  --color-cat-4:           #FDEDEC;
  --color-cat-4-text:      #A93226;

  /* --- Typography --- */
  --font-display:          'Playfair Display', Georgia, serif;
  --font-body:             'Inter', -apple-system, BlinkMacSystemFont,
                           'Segoe UI', sans-serif;

  --text-xs:               0.75rem;    /* 12px */
  --text-sm:               0.8125rem;  /* 13px */
  --text-base:             0.875rem;   /* 14px */
  --text-md:               1rem;       /* 16px */
  --text-lg:               1.0625rem;  /* 17px */
  --text-xl:               1.125rem;   /* 18px */
  --text-2xl:              1.25rem;    /* 20px */
  --text-3xl:              1.5rem;     /* 24px */
  --text-4xl:              1.875rem;   /* 30px */
  --text-5xl:              2.25rem;    /* 36px */
  --text-6xl:              2.75rem;    /* 44px */
  --text-7xl:              3.5rem;     /* 56px */

  --font-light:            300;
  --font-regular:          400;
  --font-medium:           500;
  --font-semibold:         600;
  --font-bold:             700;
  --font-extrabold:        800;
  --font-black:            900;

  --leading-tight:         1.2;
  --leading-snug:          1.35;
  --leading-normal:        1.5;
  --leading-relaxed:       1.65;
  --leading-loose:         1.8;
  --leading-article:       1.85;

  --tracking-tight:        -0.03em;
  --tracking-snug:         -0.02em;
  --tracking-normal:       0;
  --tracking-wide:         0.02em;
  --tracking-wider:        0.05em;
  --tracking-widest:       0.1em;

  /* --- Spacing --- */
  --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-7:               1.75rem;   /* 28px */
  --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 */
  --space-32:              8rem;      /* 128px */

  /* --- Border Radius --- */
  --radius-sm:             6px;
  --radius-md:             10px;
  --radius-lg:             16px;
  --radius-xl:             20px;
  --radius-2xl:            24px;
  --radius-3xl:            32px;
  --radius-full:           9999px;

  /* --- Shadows --- */
  --shadow-xs:             0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm:             0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md:             0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg:             0 8px 32px rgba(0, 0, 0, 0.10);
  --shadow-xl:             0 16px 48px rgba(0, 0, 0, 0.12);
  --shadow-gold:           0 4px 20px rgba(201, 168, 76, 0.20);
  --shadow-card:           0 2px 12px rgba(0, 0, 0, 0.06),
                           0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-card-hover:     0 8px 30px rgba(0, 0, 0, 0.10),
                           0 2px 8px rgba(0, 0, 0, 0.06);

  /* --- Transitions --- */
  --transition-fast:       150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base:       250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:       400ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring:     500ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* --- Layout --- */
  --container-xs:          480px;
  --container-sm:          640px;
  --container-md:          768px;
  --container-lg:          1024px;
  --container-xl:          1200px;
  --container-2xl:         1400px;

  --content-width:         680px;
  --nav-height:            64px;
  --admin-sidebar:         260px;

  /* --- Z-index --- */
  --z-below:               -1;
  --z-base:                0;
  --z-raised:              10;
  --z-dropdown:            100;
  --z-sticky:              200;
  --z-overlay:             300;
  --z-modal:               400;
  --z-toast:               500;
  --z-top:                 999;
}

/* ============================================================
   DARK MODE TOKENS
   ============================================================ */
[data-theme="dark"] {
  --color-bg:              #0A0A0A;
  --color-bg-secondary:    #111111;
  --color-bg-tertiary:     #181818;
  --color-surface:         #111111;
  --color-card:            #1C1C1C;
  --color-card-hover:      #222222;

  --color-text-primary:    #F5F5F5;
  --color-text-secondary:  #B0B0B0;
  --color-text-tertiary:   #808080;
  --color-text-inverse:    #0A0A0A;
  --color-text-muted:      #606060;

  --color-gold:            #D4AF5A;
  --color-gold-light:      rgba(212, 175, 90, 0.15);
  --color-gold-dark:       #B8922A;
  --color-charcoal:        #E0E0E0;
  --color-red:             #E74C3C;
  --color-red-light:       rgba(231, 76, 60, 0.15);

  --color-border:          #2A2A2A;
  --color-border-strong:   #3A3A3A;
  --color-divider:         #1E1E1E;

  --color-overlay:         rgba(0, 0, 0, 0.75);
  --color-overlay-light:   rgba(255, 255, 255, 0.03);

  --shadow-xs:             0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-sm:             0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md:             0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg:             0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-xl:             0 16px 48px rgba(0, 0, 0, 0.6);
  --shadow-gold:           0 4px 20px rgba(212, 175, 90, 0.15);
  --shadow-card:           0 2px 12px rgba(0, 0, 0, 0.3);
  --shadow-card-hover:     0 8px 30px rgba(0, 0, 0, 0.5);
}

/* ============================================================
   CSS RESET & NORMALISE
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  tab-size: 4;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: var(--font-regular);
  line-height: var(--leading-normal);
  color: var(--color-text-primary);
  background-color: var(--color-bg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color var(--transition-base),
              color var(--transition-base);
  overflow-x: hidden;
}

img, video, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
}

p {
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}

strong {
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
}

hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-8) 0;
}

::selection {
  background-color: var(--color-gold);
  color: var(--color-text-inverse);
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--color-bg-secondary);
}

::-webkit-scrollbar-thumb {
  background: var(--color-gold);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-gold-dark);
}

/* ============================================================
   FOCUS STYLES — ACCESSIBILITY
   ============================================================ */
:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ============================================================
   LAYOUT UTILITIES
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--container-xl);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

.container--sm {
  max-width: var(--container-sm);
}

.container--md {
  max-width: var(--container-md);
}

.container--content {
  max-width: var(--content-width);
}

.container--lg {
  max-width: var(--container-lg);
}

@media (min-width: 640px) {
  .container {
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }
}

@media (min-width: 1024px) {
  .container {
    padding-left: var(--space-8);
    padding-right: var(--space-8);
  }
}

/* ============================================================
   TYPOGRAPHY UTILITIES
   ============================================================ */
.font-display   { font-family: var(--font-display); }
.font-body      { font-family: var(--font-body); }

.text-xs        { font-size: var(--text-xs); }
.text-sm        { font-size: var(--text-sm); }
.text-base      { font-size: var(--text-base); }
.text-md        { font-size: var(--text-md); }
.text-lg        { font-size: var(--text-lg); }
.text-xl        { font-size: var(--text-xl); }
.text-2xl       { font-size: var(--text-2xl); }
.text-3xl       { font-size: var(--text-3xl); }
.text-4xl       { font-size: var(--text-4xl); }
.text-5xl       { font-size: var(--text-5xl); }
.text-6xl       { font-size: var(--text-6xl); }
.text-7xl       { font-size: var(--text-7xl); }

.font-light     { font-weight: var(--font-light); }
.font-regular   { font-weight: var(--font-regular); }
.font-medium    { font-weight: var(--font-medium); }
.font-semibold  { font-weight: var(--font-semibold); }
.font-bold      { font-weight: var(--font-bold); }
.font-extrabold { font-weight: var(--font-extrabold); }
.font-black     { font-weight: var(--font-black); }

.leading-tight    { line-height: var(--leading-tight); }
.leading-snug     { line-height: var(--leading-snug); }
.leading-normal   { line-height: var(--leading-normal); }
.leading-relaxed  { line-height: var(--leading-relaxed); }
.leading-loose    { line-height: var(--leading-loose); }
.leading-article  { line-height: var(--leading-article); }

.tracking-tight   { letter-spacing: var(--tracking-tight); }
.tracking-normal  { letter-spacing: var(--tracking-normal); }
.tracking-wide    { letter-spacing: var(--tracking-wide); }
.tracking-wider   { letter-spacing: var(--tracking-wider); }
.tracking-widest  { letter-spacing: var(--tracking-widest); }

.text-left        { text-align: left; }
.text-center      { text-align: center; }
.text-right       { text-align: right; }

.uppercase        { text-transform: uppercase; }
.lowercase        { text-transform: lowercase; }
.capitalize       { text-transform: capitalize; }

.text-primary     { color: var(--color-text-primary); }
.text-secondary   { color: var(--color-text-secondary); }
.text-tertiary    { color: var(--color-text-tertiary); }
.text-muted       { color: var(--color-text-muted); }
.text-gold        { color: var(--color-gold); }
.text-red         { color: var(--color-red); }
.text-inverse     { color: var(--color-text-inverse); }

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ============================================================
   DISPLAY UTILITIES
   ============================================================ */
.flex           { display: flex; }
.inline-flex    { display: inline-flex; }
.grid           { display: grid; }
.block          { display: block; }
.inline-block   { display: inline-block; }
.hidden         { display: none !important; }

.flex-col       { flex-direction: column; }
.flex-row       { flex-direction: row; }
.flex-wrap      { flex-wrap: wrap; }
.flex-nowrap    { flex-wrap: nowrap; }

.items-start    { align-items: flex-start; }
.items-center   { align-items: center; }
.items-end      { align-items: flex-end; }

.justify-start  { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end    { justify-content: flex-end; }
.justify-between{ justify-content: space-between; }

.flex-1         { flex: 1; }
.flex-none      { flex: none; }

.gap-1          { gap: var(--space-1); }
.gap-2          { gap: var(--space-2); }
.gap-3          { gap: var(--space-3); }
.gap-4          { gap: var(--space-4); }
.gap-6          { gap: var(--space-6); }
.gap-8          { gap: var(--space-8); }

/* ============================================================
   SPACING UTILITIES
   ============================================================ */
.p-0  { padding: 0; }
.p-2  { padding: var(--space-2); }
.p-4  { padding: var(--space-4); }
.p-6  { padding: var(--space-6); }
.p-8  { padding: var(--space-8); }

.px-2 { padding-left: var(--space-2); padding-right: var(--space-2); }
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }

.py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); }
.py-8 { padding-top: var(--space-8); padding-bottom: var(--space-8); }

.m-0    { margin: 0; }
.mx-auto{ margin-left: auto; margin-right: auto; }

.mt-2   { margin-top: var(--space-2); }
.mt-4   { margin-top: var(--space-4); }
.mt-6   { margin-top: var(--space-6); }
.mt-8   { margin-top: var(--space-8); }

.mb-2   { margin-bottom: var(--space-2); }
.mb-4   { margin-bottom: var(--space-4); }
.mb-6   { margin-bottom: var(--space-6); }
.mb-8   { margin-bottom: var(--space-8); }

/* ============================================================
   BACKGROUND UTILITIES
   ============================================================ */
.bg-primary     { background-color: var(--color-bg); }
.bg-secondary   { background-color: var(--color-bg-secondary); }
.bg-card        { background-color: var(--color-card); }
.bg-gold        { background-color: var(--color-gold); }
.bg-charcoal    { background-color: var(--color-charcoal); }
.bg-red         { background-color: var(--color-red); }
.bg-dark        { background-color: #0A0A0A; }

/* ============================================================
   BORDER UTILITIES
   ============================================================ */
.border         { border: 1px solid var(--color-border); }
.border-strong  { border: 1px solid var(--color-border-strong); }
.border-gold    { border: 1px solid var(--color-gold); }
.border-none    { border: none; }

.rounded-sm     { border-radius: var(--radius-sm); }
.rounded-md     { border-radius: var(--radius-md); }
.rounded-lg     { border-radius: var(--radius-lg); }
.rounded-xl     { border-radius: var(--radius-xl); }
.rounded-2xl    { border-radius: var(--radius-2xl); }
.rounded-full   { border-radius: var(--radius-full); }

/* ============================================================
   SHADOW UTILITIES
   ============================================================ */
.shadow-xs      { box-shadow: var(--shadow-xs); }
.shadow-sm      { box-shadow: var(--shadow-sm); }
.shadow-md      { box-shadow: var(--shadow-md); }
.shadow-lg      { box-shadow: var(--shadow-lg); }
.shadow-xl      { box-shadow: var(--shadow-xl); }
.shadow-gold    { box-shadow: var(--shadow-gold); }
.shadow-card    { box-shadow: var(--shadow-card); }

/* ============================================================
   POSITION UTILITIES
   ============================================================ */
.relative  { position: relative; }
.absolute  { position: absolute; }
.fixed     { position: fixed; }
.sticky    { position: sticky; }
.inset-0   { top: 0; right: 0; bottom: 0; left: 0; }
.top-0     { top: 0; }
.right-0   { right: 0; }

.z-raised   { z-index: var(--z-raised); }
.z-sticky   { z-index: var(--z-sticky); }
.z-modal    { z-index: var(--z-modal); }
.z-toast    { z-index: var(--z-toast); }

/* ============================================================
   OVERFLOW & SIZING
   ============================================================ */
.overflow-hidden  { overflow: hidden; }
.overflow-auto    { overflow: auto; }
.w-full           { width: 100%; }
.h-full           { height: 100%; }
.min-h-screen     { min-height: 100vh; }
.aspect-video     { aspect-ratio: 16 / 9; }
.aspect-square    { aspect-ratio: 1 / 1; }
.object-cover     { object-fit: cover; }
.object-center    { object-position: center; }

/* ============================================================
   IMAGE PLACEHOLDER SYSTEM
   Used throughout the site for editorial images
   ============================================================ */
.img-placeholder {
  background: linear-gradient(
    135deg,
    var(--color-bg-secondary) 0%,
    var(--color-bg-tertiary) 50%,
    var(--color-bg-secondary) 100%
  );
  background-size: 200% 200%;
  animation: shimmer 2.5s infinite linear;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.img-placeholder::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.1) 50%,
    transparent 100%
  );
  animation: shimmer-sweep 1.8s infinite;
}

[data-theme="dark"] .img-placeholder {
  background: linear-gradient(
    135deg,
    #1C1C1C 0%,
    #242424 50%,
    #1C1C1C 100%
  );
}

/* Image placeholder label */
.img-placeholder__label {
  position: relative;
  z-index: 1;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--color-text-muted);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4);
  text-align: center;
}

.img-placeholder__label svg {
  width: 28px;
  height: 28px;
  opacity: 0.4;
}

/* Real image loaded state */
.img-placeholder.loaded {
  animation: none;
  background: none;
}

.img-placeholder.loaded::after {
  display: none;
}

/* ============================================================
   SKELETON LOADING
   ============================================================ */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-bg-secondary) 25%,
    var(--color-bg-tertiary) 50%,
    var(--color-bg-secondary) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-sweep 1.5s infinite linear;
  border-radius: var(--radius-sm);
  min-height: 16px;
}

.skeleton--text   { height: 16px; border-radius: var(--radius-full); }
.skeleton--title  { height: 28px; border-radius: var(--radius-full); }
.skeleton--img    { height: 200px; border-radius: var(--radius-lg); }
.skeleton--card   { height: 300px; border-radius: var(--radius-lg); }

/* ============================================================
   READING PROGRESS BAR
   ============================================================ */
#reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--color-gold) 0%,
    var(--color-red) 100%
  );
  z-index: var(--z-top);
  transition: width 100ms linear;
  border-radius: 0 var(--radius-full) var(--radius-full) 0;
}

/* ============================================================
   SCROLLBAR RESTORATION FOR ARTICLE CONTENT
   ============================================================ */
.prose {
  font-family: var(--font-body);
  font-size: var(--text-xl);
  line-height: var(--leading-article);
  color: var(--color-text-secondary);
  max-width: var(--content-width);
}

.prose p {
  margin-bottom: var(--space-6);
  font-size: var(--text-xl);
  line-height: var(--leading-article);
}

.prose h2 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  color: var(--color-text-primary);
  margin-top: var(--space-12);
  margin-bottom: var(--space-4);
  letter-spacing: var(--tracking-tight);
}

.prose h3 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--color-text-primary);
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
}

.prose blockquote {
  border-left: 3px solid var(--color-gold);
  padding-left: var(--space-6);
  margin: var(--space-8) 0;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-style: italic;
  color: var(--color-text-primary);
  line-height: var(--leading-snug);
}

.prose ul,
.prose ol {
  list-style: revert;
  padding-left: var(--space-6);
  margin-bottom: var(--space-6);
}

.prose ul li,
.prose ol li {
  margin-bottom: var(--space-2);
  line-height: var(--leading-relaxed);
}

.prose a {
  color: var(--color-gold);
  border-bottom: 1px solid var(--color-gold-light);
  transition: border-color var(--transition-fast);
}

.prose a:hover {
  border-color: var(--color-gold);
}

.prose strong {
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
}

.prose em {
  font-style: italic;
}

/* ============================================================
   RESPONSIVE VISIBILITY
   ============================================================ */
.mobile-only {
  display: block;
}

.desktop-only {
  display: none;
}

@media (min-width: 768px) {
  .mobile-only  { display: none; }
  .desktop-only { display: block; }
}

/* ============================================================
   PRINT STYLES
   ============================================================ */
@media print {
  .no-print    { display: none !important; }
  body         { background: white; color: black; }
  .nav, footer { display: none; }
}