/*
  tokens.css
  Design tokens — Royal Time luxury watch brand identity.
  Color direction: deep luxury green, almost black, white, warm off-white, subtle gold.
*/

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Poppins:wght@300;400;500;600;700&display=swap');

:root {

  /* ─── Typography ─────────────────────────────────────────── */
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body:    'Poppins', system-ui, sans-serif;

  --font-weight-light:    300;
  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  /* Heading scale — mobile base */
  --text-h1: 1.75rem;   /* 28px */
  --text-h2: 1.5rem;    /* 24px */
  --text-h3: 1.375rem;  /* 22px */
  --text-h4: 1.125rem;  /* 18px */
  --text-h5: 1rem;      /* 16px */
  --text-h6: 0.875rem;  /* 14px */

  /* Body scale */
  --text-xs:   0.6875rem; /* 11px */
  --text-sm:   0.8125rem; /* 13px */
  --text-base: 0.9375rem; /* 15px — mobile body */
  --text-lg:   1.1875rem; /* 19px */

  --heading-letter-spacing: -0.01em;
  --heading-text-transform: none;

  /* ─── Brand accent colors ────────────────────────────────── */
  --color-green-primary:  #006039;
  --color-green-dark:     #003D2B;
  --color-almost-black:   #0B0F0D;
  --color-gold:           #C9A646;
  --color-soft-bg:        #F7F5F0;

  /* ─── Color palette ──────────────────────────────────────── */
  --color-background:      #F7F5F0;
  --color-text:            #0B0F0D;
  --color-text-subdued:    #5a6660;
  --color-border:          rgba(11, 15, 13, 0.10);

  --color-header-bg:       #ffffff;
  --color-header-text:     #0B0F0D;

  --color-footer-bg:       #003D2B;
  --color-footer-text:     #ffffff;

  /* Buttons */
  --color-btn-primary-bg:   #006039;
  --color-btn-primary-text: #ffffff;
  --color-btn-secondary-bg: #0B0F0D;
  --color-btn-secondary-text: #ffffff;

  /* Product / sale */
  --color-sale-accent:      #D92D20;
  --color-sale-badge-bg:    #D92D20;
  --color-sale-badge-text:  #ffffff;
  --color-compare-price:    #5a6660;
  --color-sold-out-badge:   #c2c2c2;

  /* Product card */
  --color-card-bg:          #ffffff;
  --color-card-text:        #0B0F0D;

  /* Feedback */
  --color-success:  #00a341;
  --color-warning:  #ffb74a;
  --color-error:    #D92D20;

  /* ─── Spacing scale ──────────────────────────────────────── */
  --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-14:  3.5rem;    /* 56px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */

  /* Section vertical rhythm — mobile */
  --section-spacing-block:  var(--space-12);
  --section-inner-spacing:  var(--space-10);

  /* ─── Layout ─────────────────────────────────────────────── */
  --page-max-width:         1600px;
  --page-gutter:            var(--space-5);   /* mobile gutter */

  /* ─── Border radii ───────────────────────────────────────── */
  --radius-xs:     0.25rem;   /*  4px */
  --radius-sm:     0.375rem;  /*  6px */
  --radius-md:     0.75rem;   /* 12px */
  --radius-lg:     1.5rem;    /* 24px — block radius */
  --radius-button: 3.75rem;   /* 60px — pill */
  --radius-input:  0.5rem;    /*  8px */
  --radius-full:   9999px;

  /* ─── Shadows ────────────────────────────────────────────── */
  --shadow-sm:    0 2px 8px  rgba(0, 0, 0, 0.08);
  --shadow-md:    0 5px 20px rgba(0, 0, 0, 0.08);
  --shadow-block: 0 18px 50px rgba(0, 0, 0, 0.10);

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

  /* ─── Z-index scale ──────────────────────────────────────── */
  --z-below:    -1;
  --z-base:      0;
  --z-raised:   10;
  --z-header:  100;
  --z-drawer:  200;
  --z-overlay: 300;
  --z-modal:   400;
  --z-toast:   500;

  /* ─── Breakpoints (reference — use in media queries) ─────── */
  /*
    sm:  700px   tablet portrait
    md: 1000px   laptop
    lg: 1150px   desktop
    xl: 1400px   wide desktop
  */
}

/* ─── Desktop overrides ─────────────────────────────────────── */
@media (min-width: 700px) {
  :root {
    --text-h1:   2.25rem;  /* 36px */
    --text-h2:   1.75rem;  /* 28px */
    --text-h3:   1.625rem; /* 26px */
    --text-h4:   1.25rem;  /* 20px */
    --text-h5:   1.125rem; /* 18px */
    --text-h6:   1rem;     /* 16px */

    --text-base: 1rem;     /* 16px */

    --page-gutter: 2rem;
    --section-spacing-block: var(--space-16);
    --section-inner-spacing: var(--space-12);
  }
}

@media (min-width: 1150px) {
  :root {
    --page-gutter: var(--space-12);
    --section-spacing-block: var(--space-20);
    --section-inner-spacing: var(--space-16);
  }
}

@media (min-width: 1400px) {
  :root {
    --text-h1: 3rem;       /* 48px */
    --text-h2: 2.5rem;     /* 40px */
    --text-h3: 1.75rem;    /* 28px */
    --text-h4: 1.5rem;     /* 24px */

    --section-spacing-block: var(--space-24);
  }
}