/* ============================================================
   BASTOS & SÁ ADVOCACIA — Design Tokens
   colors_and_type.css
   ============================================================ */

/* Google Fonts import */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300;1,9..40,400&display=swap');

/* ============================================================
   COLOR TOKENS
   ============================================================ */
:root {

  /* --- Base Palette --- */
  --color-navy:         #0A2B3B;   /* Azul Principal */
  --color-sand:         #CBB89D;   /* Areia Principal */
  --color-offwhite:     #F7F4EE;   /* Off-white */
  --color-lightgray:    #F5F5F3;   /* Cinza Extremamente Claro */
  --color-graphite:     #3A3A3A;   /* Grafite */
  --color-white:        #FFFFFF;

  /* --- Blue Gradient Steps (block-based, not smooth) --- */
  --color-blue-step-1:  #D8E2E7;   /* Lightest */
  --color-blue-step-2:  #7C93A0;   /* Mid */
  --color-blue-step-3:  #0A2B3B;   /* Darkest = --color-navy */

  /* --- Sand Gradient Steps (block-based, not smooth) --- */
  --color-sand-step-1:  #F1E9DD;   /* Lightest */
  --color-sand-step-2:  #DECDB8;   /* Mid */
  --color-sand-step-3:  #CBB89D;   /* Darkest = --color-sand */

  /* --- Semantic Colors --- */
  --color-bg:           var(--color-offwhite);    /* Default page background */
  --color-bg-alt:       var(--color-lightgray);   /* Alternate background */
  --color-bg-dark:      var(--color-navy);        /* Dark section background */
  --color-bg-warm:      var(--color-sand-step-1); /* Warm tinted background */

  --color-text:         var(--color-graphite);    /* Body text */
  --color-text-light:   #6B6B6B;                  /* Secondary/caption text */
  --color-text-inverse: var(--color-offwhite);    /* Text on dark backgrounds */
  --color-text-title:   var(--color-navy);        /* Headings */

  --color-border:       var(--color-sand);        /* Default border */
  --color-border-light: #E4DDD3;                  /* Subtle border */
  --color-border-table: var(--color-blue-step-1); /* Table grid lines */

  --color-accent:       var(--color-sand);        /* Primary accent */
  --color-accent-dark:  var(--color-navy);        /* Dark accent */

  /* --- Interactive States --- */
  --color-hover-bg:     var(--color-lightgray);
  --color-hover-opacity: 0.8;
  --color-focus-ring:   var(--color-sand);

  /* ============================================================
     TYPOGRAPHY TOKENS
     ============================================================ */

  /* --- Font Families --- */
  --font-display:   'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body:      'DM Sans', 'Avenir Next', Helvetica, Arial, sans-serif;
  /* NOTE: DM Sans substitutes Avenir Next — see README.md caveats */

  /* --- Font Weights --- */
  --fw-light:       300;
  --fw-regular:     400;
  --fw-medium:      500;
  --fw-semibold:    600;
  --fw-bold:        700;

  /* --- Type Scale (fluid-friendly rem base) --- */
  --text-xs:        0.75rem;   /*  12px */
  --text-sm:        0.875rem;  /*  14px */
  --text-base:      1rem;      /*  16px */
  --text-md:        1.125rem;  /*  18px */
  --text-lg:        1.25rem;   /*  20px */
  --text-xl:        1.5rem;    /*  24px */
  --text-2xl:       2rem;      /*  32px */
  --text-3xl:       2.5rem;    /*  40px */
  --text-4xl:       3.5rem;    /*  56px */
  --text-5xl:       5rem;      /*  80px */

  /* --- Line Heights --- */
  --leading-tight:  1.15;
  --leading-snug:   1.3;
  --leading-normal: 1.6;
  --leading-loose:  1.8;

  /* --- Letter Spacing --- */
  --tracking-tight:  -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.05em;
  --tracking-widest:  0.15em;

  /* ============================================================
     SEMANTIC TYPE STYLES
     ============================================================ */

  /* Display / Cover titles */
  --h-cover-font:    var(--font-display);
  --h-cover-size:    var(--text-5xl);
  --h-cover-weight:  var(--fw-light);
  --h-cover-leading: var(--leading-tight);
  --h-cover-color:   var(--color-white);
  --h-cover-tracking: var(--tracking-tight);

  /* H1 — Document / Section title */
  --h1-font:     var(--font-display);
  --h1-size:     var(--text-4xl);
  --h1-weight:   var(--fw-light);
  --h1-leading:  var(--leading-tight);
  --h1-color:    var(--color-navy);
  --h1-tracking: var(--tracking-tight);

  /* H2 — Section heading */
  --h2-font:     var(--font-display);
  --h2-size:     var(--text-3xl);
  --h2-weight:   var(--fw-regular);
  --h2-leading:  var(--leading-snug);
  --h2-color:    var(--color-navy);

  /* H3 — Subsection */
  --h3-font:     var(--font-body);
  --h3-size:     var(--text-lg);
  --h3-weight:   var(--fw-medium);
  --h3-leading:  var(--leading-snug);
  --h3-color:    var(--color-navy);
  --h3-tracking: var(--tracking-wide);
  --h3-transform: uppercase;

  /* H4 — Minor heading / label */
  --h4-font:     var(--font-body);
  --h4-size:     var(--text-sm);
  --h4-weight:   var(--fw-medium);
  --h4-color:    var(--color-graphite);
  --h4-tracking: var(--tracking-widest);
  --h4-transform: uppercase;

  /* Body — Main prose */
  --p-font:      var(--font-body);
  --p-size:      var(--text-base);
  --p-weight:    var(--fw-regular);
  --p-leading:   var(--leading-normal);
  --p-color:     var(--color-graphite);

  /* Small / Caption */
  --caption-font:    var(--font-body);
  --caption-size:    var(--text-xs);
  --caption-weight:  var(--fw-regular);
  --caption-color:   var(--color-text-light);
  --caption-tracking: var(--tracking-wide);

  /* Label / Eyebrow */
  --label-font:    var(--font-body);
  --label-size:    var(--text-xs);
  --label-weight:  var(--fw-medium);
  --label-tracking: var(--tracking-widest);
  --label-transform: uppercase;
  --label-color:   var(--color-sand);

  /* ============================================================
     SPACING TOKENS
     ============================================================ */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   32px;
  --space-7:   48px;
  --space-8:   64px;
  --space-9:   96px;
  --space-10:  128px;

  /* Document margins */
  --doc-margin-x: 72px;
  --doc-margin-y: 64px;

  /* ============================================================
     BORDER & RADIUS TOKENS
     ============================================================ */
  --radius-none:  0px;
  --radius-xs:    2px;   /* Max for interactive elements */
  --radius-sm:    4px;   /* Only used sparingly */

  --border-thin:   1px;
  --border-medium: 2px;
  --border-thick:  4px;

  /* ============================================================
     ELEVATION / SHADOW
     ============================================================ */
  /* NO shadows in this design system — structure from color blocks */
  --shadow-none: none;

}

/* ============================================================
   BASE ELEMENT STYLES
   ============================================================ */

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1 {
  font-family: var(--h1-font);
  font-size: var(--h1-size);
  font-weight: var(--h1-weight);
  line-height: var(--h1-leading);
  color: var(--h1-color);
  letter-spacing: var(--h1-tracking);
  text-wrap: pretty;
}

h2 {
  font-family: var(--h2-font);
  font-size: var(--h2-size);
  font-weight: var(--h2-weight);
  line-height: var(--h2-leading);
  color: var(--h2-color);
  text-wrap: pretty;
}

h3 {
  font-family: var(--h3-font);
  font-size: var(--h3-size);
  font-weight: var(--h3-weight);
  line-height: var(--h3-leading);
  color: var(--h3-color);
  letter-spacing: var(--h3-tracking);
  text-transform: var(--h3-transform);
  text-wrap: pretty;
}

h4, .label {
  font-family: var(--h4-font);
  font-size: var(--h4-size);
  font-weight: var(--h4-weight);
  color: var(--h4-color);
  letter-spacing: var(--h4-tracking);
  text-transform: var(--h4-transform);
}

p {
  font-family: var(--p-font);
  font-size: var(--p-size);
  font-weight: var(--p-weight);
  line-height: var(--p-leading);
  color: var(--p-color);
  text-wrap: pretty;
}

/* ============================================================
   UTILITY CLASSES
   ============================================================ */

/* Color utilities */
.bg-navy      { background-color: var(--color-navy); }
.bg-sand      { background-color: var(--color-sand); }
.bg-offwhite  { background-color: var(--color-offwhite); }
.bg-lightgray { background-color: var(--color-lightgray); }

.text-navy    { color: var(--color-navy); }
.text-sand    { color: var(--color-sand); }
.text-inverse { color: var(--color-text-inverse); }

/* Type utilities */
.font-display { font-family: var(--font-display); }
.font-body    { font-family: var(--font-body); }

/* Eyebrow / label style */
.eyebrow {
  font-family: var(--label-font);
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  letter-spacing: var(--label-tracking);
  text-transform: var(--label-transform);
  color: var(--label-color);
}

/* Divider */
.divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-6) 0;
}

.divider-navy {
  border-top: 2px solid var(--color-navy);
}