/*
 * ============================================================
 * 01-html-elements.css
 * Base HTML element styles extracted from the Figma Make
 * "Design elegant landing page" export.
 * ============================================================
 *
 * CONTENTS
 *   1. CSS Custom Properties (Design Tokens)
 *   2. CSS Reset / Normalise
 *   3. Base HTML Element Styles
 *   4. Typography Scale
 *   5. Form Element Styles
 *   6. Media & Embed Elements
 * ============================================================
 */


/* ============================================================
   1. CSS Custom Properties (Design Tokens)
   ============================================================ */

:root {
  /* ── Font sizes ── */
  --font-size:   16px;
  --text-xs:     0.75rem;   /* 12 px  */
  --text-sm:     0.875rem;  /* 14 px  */
  --text-base:   1rem;      /* 16 px  */
  --text-lg:     1.125rem;  /* 18 px  */
  --text-xl:     1.25rem;   /* 20 px  */
  --text-2xl:    1.5rem;    /* 24 px  */
  --text-4xl:    2.25rem;   /* 36 px  */
  --text-5xl:    3rem;      /* 48 px  */
  --text-7xl:    4.5rem;    /* 72 px  */

  /* Corresponding line heights */
  --text-xs--line-height:   calc(1    / 0.75);
  --text-sm--line-height:   calc(1.25 / 0.875);
  --text-base--line-height: calc(1.5  / 1);
  --text-lg--line-height:   calc(1.75 / 1.125);
  --text-xl--line-height:   calc(1.75 / 1.25);
  --text-2xl--line-height:  calc(2    / 1.5);
  --text-4xl--line-height:  calc(2.5  / 2.25);
  --text-5xl--line-height:  1;
  --text-7xl--line-height:  1;

  /* ── Font weights ── */
  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;

  /* ── Letter spacing ── */
  --tracking-tight:   -0.025em;
  --tracking-wide:     0.025em;
  --tracking-widest:   0.1em;

  /* ── Line heights ── */
  --leading-tight:   1.25;
  --leading-relaxed: 1.625;

  /* ── Spacing unit (0.25 rem grid) ── */
  --spacing: 0.25rem;

  /* ── Border radii ── */
  --radius:    0.625rem;
  --radius-xs: 0.125rem;
  --radius-2xl: 1rem;

  /* ── Shadows ── */
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow:    0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);

  /* ── Font families ── */
  --font-sans: ui-sans-serif, system-ui, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;

  /* ── Transitions ── */
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --default-transition-duration: 150ms;
  --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Blur ── */
  --blur-sm: 8px;

  /* ── Banner heights (Figma UI chrome) ── */
  --banner-height:    48px;
  --banner-height-v2: 40px;
  --full-height-with-banner: calc(100dvh - var(--banner-height));

  /* ── Color palette ── */
  --background:         #1a1625;
  --foreground:         #f5f1e8;
  --card:               #231d2e;
  --card-foreground:    #f5f1e8;
  --primary:            #c9a961;
  --primary-foreground: #1a1625;
  --secondary:          #2d2638;
  --secondary-foreground: #f5f1e8;
  --muted:              #3d3548;
  --muted-foreground:   #b8b0a0;
  --accent:             #c9a961;
  --accent-foreground:  #1a1625;
  --border:             rgba(201, 169, 97, 0.15);
  --input:              transparent;
  --input-background:   #2d2638;
  --switch-background:  #cbced4;
  --destructive:        #d4183d;
  --destructive-foreground: #ffffff;
  --ring:               oklch(0.708 0 0);

  /* ── Sidebar tokens ── */
  --sidebar:                    oklch(0.985 0 0);
  --sidebar-foreground:         oklch(0.145 0 0);
  --sidebar-primary:            #030213;
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent:             oklch(0.97 0 0);
  --sidebar-accent-foreground:  oklch(0.205 0 0);
  --sidebar-border:             oklch(0.922 0 0);
  --sidebar-ring:               oklch(0.708 0 0);

  /* ── Chart colours ── */
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.600 0.118 184.704);
  --chart-3: oklch(0.398 0.070 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);

  /* ── Container widths ── */
  --container-sm:  24rem;
  --container-md:  28rem;
  --container-lg:  32rem;
  --container-2xl: 42rem;
  --container-3xl: 48rem;
  --container-5xl: 64rem;
  --container-6xl: 72rem;
  --container-7xl: 80rem;
  --container-8xl: 96rem;
}

/* Dark-mode overrides (same palette — site is dark-first) */
.dark {
  --background:         #1a1625;
  --foreground:         #f5f1e8;
  --card:               #231d2e;
  --card-foreground:    #f5f1e8;
  --primary:            #c9a961;
  --primary-foreground: #1a1625;
  --secondary:          #2d2638;
  --secondary-foreground: #f5f1e8;
  --muted:              #3d3548;
  --muted-foreground:   #b8b0a0;
  --accent:             #c9a961;
  --accent-foreground:  #1a1625;
  --border:             rgba(201, 169, 97, 0.15);
  --input:              oklch(0.269 0 0);
  --ring:               oklch(0.439 0 0);
  --sidebar:            oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary:    oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent:     oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border:     oklch(0.269 0 0);
  --sidebar-ring:       oklch(0.439 0 0);
}


/* ============================================================
   2. CSS Reset / Normalise
   ============================================================ */

@layer reset {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }

  /* Global border & outline colours inherit from tokens */
  * {
    border-color: var(--border);
    outline-color: var(--ring);
  }

  @supports (color: color-mix(in lab, red, red)) {
    * { outline-color: color-mix(in oklab, var(--ring) 50%, transparent); }
  }

  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }

  abbr:where([title]) {
    text-decoration: underline dotted;
  }

  ol,
  ul,
  menu {
    list-style: none;
  }

  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }

  progress { vertical-align: baseline; }
  summary  { display: list-item; }

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

  img,
  svg,
  video,
  canvas,
  audio,
  iframe,
  embed,
  object {
    display: block;
    vertical-align: middle;
  }

  textarea { resize: vertical; }

  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}


/* ============================================================
   3. Base HTML Element Styles
   ============================================================ */

html,
:host {
  font-size: var(--font-size);          /* 16 px */
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
  font-family: var(--font-sans);
  font-synthesis: none;
  -webkit-tap-highlight-color: transparent;
}

body {
  background-color: var(--background);
  color: var(--foreground);
}

/* Monospace elements */
code,
kbd,
samp,
pre {
  font-family: var(--font-mono);
  font-size: 1em;
}

small { font-size: 80%; }

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub { bottom: -0.25em; }
sup { top: -0.5em; }

b,
strong { font-weight: bolder; }

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

/* Remove focus ring for mouse users */
:-moz-focusring  { outline: auto; }
:-moz-ui-invalid { box-shadow: none; }


/* ============================================================
   4. Typography Scale
   ============================================================ */

h1 {
  font-size:   var(--text-2xl);            /* 24 px */
  font-weight: var(--font-weight-medium);
  line-height: 1.5;
}

h2 {
  font-size:   var(--text-xl);             /* 20 px */
  font-weight: var(--font-weight-medium);
  line-height: 1.5;
}

h3 {
  font-size:   var(--text-lg);             /* 18 px */
  font-weight: var(--font-weight-medium);
  line-height: 1.5;
}

h4 {
  font-size:   var(--text-base);           /* 16 px */
  font-weight: var(--font-weight-medium);
  line-height: 1.5;
}

/*
 * Heading utility overrides used in the design:
 *
 *   .text-4xl { font-size: 2.25rem; }   → section headlines
 *   .text-5xl { font-size: 3rem;    }   → hero headline
 *   .text-7xl { font-size: 4.5rem;  }   → large display
 *
 * All headings inside the design use:
 *   tracking-tight (-0.025em) + leading-tight (1.25)
 */


/* ============================================================
   5. Form Element Styles
   ============================================================ */

label {
  font-size:   var(--text-base);
  font-weight: var(--font-weight-medium);
  line-height: 1.5;
}

button {
  font-size:   var(--text-base);
  font-weight: var(--font-weight-medium);
  line-height: 1.5;
}

input {
  font-size:   var(--text-base);
  font-weight: var(--font-weight-normal);
  line-height: 1.5;
}

button,
input,
select,
optgroup,
textarea,
::file-selector-button {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  border-radius: 0;
  background-color: transparent;
  opacity: 1;
}

button,
input:where([type="button"], [type="reset"], [type="submit"]),
::file-selector-button {
  appearance: button;
}

::placeholder { opacity: 1; }

@supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
  ::placeholder {
    color: currentcolor;

    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, currentcolor 50%, transparent);
    }
  }
}

::-webkit-search-decoration    { -webkit-appearance: none; }
::-webkit-inner-spin-button,
::-webkit-outer-spin-button     { height: auto; }
::-webkit-date-and-time-value   { min-height: 1lh; text-align: inherit; }
::-webkit-datetime-edit          { display: inline-flex; }
::-webkit-datetime-edit-fields-wrapper { padding: 0; }
::-webkit-calendar-picker-indicator { line-height: 1; }


/* ============================================================
   6. Media & Embed Elements (already covered in reset above)
   Additional helpers used in the design:
   ============================================================ */

/* Responsive images */
img { object-fit: cover; }   /* default for card images */