/* ============================================================
   ASTHARA DESIGN SYSTEM — colors_and_type.css
   Brand foundation for Asthara Skyfront City and product surfaces
   (marketing, sales, and the Loadify operations platform).

   Sources of truth:
     - Asthara Brand Identity Guidelines (PDF, 41pp)
     - Loadify — Design System Reference (token model)

   Token namespace: --as-*   (Asthara)
                    --ld-*   (Loadify operational alias, for SaaS surfaces)
   ============================================================ */

/* ----------  FONTS  ---------------------------------------- */
/* Brand book primary is Contax Sans (commercial). We substitute
   DM Sans — the closest free geometric grotesque for the
   wordmark and product UI. Tertiary "Winter Wind" (script,
   commercial) substitutes with Allura. Both flagged in README. */

@import url("https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500;600;700;800&family=DM+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&family=Allura&display=swap");

:root {
  /* ============  PRIMARY PALETTE  ============================
     Asthara's heritage gold + ink. Gold is reserved for brand
     moments, primary actions, and the logo. Ink carries
     navigation and structural surfaces. */

  --as-gold:           #C88246; /* Primary gold (RGB 200,130,70) */
  --as-gold-deep:      #915010; /* Hover / pressed gold         */
  --as-gold-soft:      #F5C896; /* Accent / borders             */
  --as-gold-tint:      #F8EEDD; /* Background tint              */

  --as-ink:            #2E2F3B; /* Headings, sidebar, dark BG   */
  --as-ink-mid:        #43445A; /* Sidebar gradient stop        */
  --as-ink-soft:       #6B6859; /* Body / captions on canvas    */
  --as-ink-faint:      #9A9583; /* Disabled / helpers           */

  /* Gradient lockup used on the logo and brand moments.
     Three-stop bronze-to-light reproduces the PDF logo finish. */
  --as-gradient-gold:
    linear-gradient(135deg, #6E3C0B 0%, #C88246 45%, #F5C896 80%, #B97138 100%); /* @kind color */
  --as-gradient-ink:
    linear-gradient(180deg, #2E2F3B 0%, #43445A 100%); /* @kind color */

  /* ============  SURFACES & LINES  ===========================
     Warm-neutral canvas pulled from the brand book paper stock. */

  --as-bg:             #FAF8F4; /* App / page background     */
  --as-bg-alt:         #F3EFE7; /* Subtle rows / hover        */
  --as-card:           #FFFFFF; /* Cards / sheets             */
  --as-line:           #E8E2D5; /* Borders / dividers         */
  --as-line-strong:    #D6CDB8; /* Heavier dividers           */

  /* ============  SECONDARY EXPRESSIVE PALETTE  ===============
     The "8 Elements of Infini-City" — only used to communicate
     brand pillars or as data accents in marketing collateral.
     Do NOT use these on the operational SaaS UI. */

  --as-x-cyan:         #28DCE6;
  --as-x-teal:         #00BEB9;
  --as-x-teal-deep:    #008282;
  --as-x-green:        #00A05A;
  --as-x-green-bright: #00D282;
  --as-x-deep-sea:     #00414B;
  --as-x-navy:         #001E78;
  --as-x-blue:         #3287F0;
  --as-x-electric:     #233CF0;
  --as-x-lavender:     #A0A5FA;
  --as-x-purple:       #874BF5;
  --as-x-grape:        #6400AA;
  --as-x-pink:         #D269FA;
  --as-x-magenta:      #DC00C8;
  --as-x-rose:         #EB0064;
  --as-x-yellow:       #FFC846;
  --as-x-orange:       #FF8C0A;
  --as-x-coral:        #FF4600;

  /* ============  STATUS (Loadify SaaS palette)  ==============
     Derived from the secondary palette. FG/BG pairs meet WCAG
     AA for 12px+ on tinted chip backgrounds. */

  --as-success-fg:   #00A05A;  --as-success-bg:   #E6F5EE;
  --as-warning-fg:   #B45309;  --as-warning-bg:   #FFF1DE;
  --as-danger-fg:    #EB0064;  --as-danger-bg:    #FCE3EE;
  --as-info-fg:      #3287F0;  --as-info-bg:      #E3EEFD;
  --as-active-fg:    #008282;  --as-active-bg:    #DEF1F1;

  /* ============  TYPOGRAPHY  =================================
     Brand book defines three families:
       Primary    — Contax Sans   (sub: DM Sans)
       Secondary  — Raleway       (web-safe / Google)
       Tertiary   — Winter Wind   (sub: Allura, script)
     Raleway is the universal voice for product UI (per the
     Loadify reference). The display sans is used on hero copy
     and the wordmark. Allura appears only as a brand accent
     ("Your Infinite Experience" lockup). */

  --as-font-display: "DM Sans", "Contax Sans", -apple-system,
                     BlinkMacSystemFont, "Segoe UI", sans-serif;
  --as-font-body:    "Raleway", -apple-system, BlinkMacSystemFont,
                     "Segoe UI", sans-serif;
  --as-font-script:  "Allura", "Winter Wind", "Brush Script MT", cursive;
  --as-font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular,
                     Menlo, Consolas, monospace;

  /* Tabular figures helper — apply with font-variant-numeric */
  --as-tabular: tabular-nums lining-nums; /* @kind other */

  /* ============  TYPE SCALE  =================================
     Two tracks. The marketing scale leans into editorial
     hierarchy (large displays, generous leading). The product
     scale is the Loadify density (compact, tabular-friendly). */

  /* Marketing display scale */
  --as-display-xl:  clamp(56px, 8vw, 112px); /* @kind font */
  --as-display-lg:  clamp(40px, 5.5vw, 72px); /* @kind font */
  --as-display-md:  clamp(32px, 4vw, 48px); /* @kind font */
  --as-display-sm:  clamp(24px, 2.6vw, 32px); /* @kind font */
  --as-script-lg:   clamp(48px, 6vw, 88px); /* @kind font */

  /* Product scale (Loadify) */
  --as-h1:          24px; /* @kind font */
  --as-h2:          16px; /* @kind font */
  --as-h3:          14px; /* @kind font */
  --as-body:        13px; /* @kind font */
  --as-body-sm:     12px; /* @kind font */
  --as-caption:     11px; /* @kind font */
  --as-mono:        12px; /* @kind font */

  --as-lh-tight:    1.05; /* @kind font */
  --as-lh-snug:     1.25; /* @kind font */
  --as-lh-normal:   1.5; /* @kind font */
  --as-lh-loose:    1.7; /* @kind font */

  --as-tracking-tight:   -0.01em; /* @kind font */
  --as-tracking-normal:  0; /* @kind font */
  --as-tracking-wide:    0.06em;     /* @kind font */
  --as-tracking-wider:   0.16em;     /* @kind font */

  /* ============  SPACING  ====================================
     4-pixel base. Most paddings live in 8–24; larger for hero. */

  --as-space-0_5:   2px;
  --as-space-1:     4px;
  --as-space-2:     8px;
  --as-space-3:     12px;
  --as-space-4:     16px;
  --as-space-5:     20px;
  --as-space-6:     24px;
  --as-space-8:     32px;
  --as-space-9:     36px;
  --as-space-12:    48px;
  --as-space-16:    64px;
  --as-space-20:    80px;
  --as-space-24:    96px;

  /* ============  RADII  ======================================
     Subtle, never playful. 6/8/12 carries the bulk of the UI. */

  --as-radius-1:    4px;
  --as-radius-2:    6px;
  --as-radius-3:    8px;
  --as-radius-4:    12px;
  --as-radius-5:    18px;
  --as-radius-full: 9999px;

  /* ============  ELEVATION  ==================================
     e0 = flat (border only, default for cards on canvas).
     e1 = subtle  (sticky bars, hovered cards).
     e2 = popover (dropdowns, tooltips).
     e3 = modal   (drawer, modal, command palette). */

  --as-e0: 0 0 0 1px var(--as-line);
  --as-e1: 0 1px 3px rgba(46, 47, 59, 0.08);
  --as-e2: 0 8px 24px rgba(46, 47, 59, 0.10);
  --as-e3: 0 24px 60px rgba(46, 47, 59, 0.18);

  /* Brand-tinted focus ring (Loadify default) */
  --as-focus-ring: 0 0 0 3px rgba(145, 80, 15, 0.18);

  /* ============  MOTION  =====================================
     Purposeful and quiet. */

  --as-dur-micro:      120ms; /* @kind other */
  --as-dur-standard:   200ms; /* @kind other */
  --as-dur-expressive: 250ms; /* @kind other */

  --as-ease-out:       cubic-bezier(0.2, 0.8, 0.2, 1); /* @kind other */
  --as-ease-in-out:    cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --as-ease-back:      cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */

  /* ============  LAYOUT  =====================================
     Standard frames. */

  --as-frame-desktop: 1440px; /* @kind spacing */
  --as-frame-tablet:  1180px; /* @kind spacing */
  --as-sidebar:       248px; /* @kind spacing */
  --as-sidebar-rail:  76px; /* @kind spacing */
  --as-topbar:        60px; /* @kind spacing */

  /* ============  LOADIFY ALIASES  ============================
     Drop-in tokens for SaaS surfaces (per Loadify reference). */

  --ld-primary:        var(--as-gold);
  --ld-primary-deep:   var(--as-gold-deep);
  --ld-primary-soft:   var(--as-gold-soft);
  --ld-primary-tint:   var(--as-gold-tint);
  --ld-ink:            var(--as-ink);
  --ld-ink-mid:        var(--as-ink-mid);
  --ld-text-mute:      var(--as-ink-soft);
  --ld-text-faint:     var(--as-ink-faint);
  --ld-bg:             var(--as-bg);
  --ld-bg-alt:         var(--as-bg-alt);
  --ld-card:           var(--as-card);
  --ld-line:           var(--as-line);
  --ld-success-fg:     var(--as-success-fg);
  --ld-success-bg:     var(--as-success-bg);
  --ld-warning-fg:     var(--as-warning-fg);
  --ld-warning-bg:     var(--as-warning-bg);
  --ld-danger-fg:      var(--as-danger-fg);
  --ld-danger-bg:      var(--as-danger-bg);
  --ld-info-fg:        var(--as-info-fg);
  --ld-info-bg:        var(--as-info-bg);
  --ld-active-fg:      var(--as-active-fg);
  --ld-active-bg:      var(--as-active-bg);
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   Apply these by class on marketing / brand surfaces.
   Product UI should compose its own components from the tokens.
   ============================================================ */

.as-display-xl,
.as-display-lg,
.as-display-md,
.as-display-sm,
.as-h1, .as-h2, .as-h3 {
  font-family: var(--as-font-display);
  color: var(--as-ink);
  margin: 0;
  text-wrap: balance;
}

.as-display-xl { font-size: var(--as-display-xl); font-weight: 800; line-height: var(--as-lh-tight); letter-spacing: var(--as-tracking-tight); }
.as-display-lg { font-size: var(--as-display-lg); font-weight: 700; line-height: var(--as-lh-tight); letter-spacing: var(--as-tracking-tight); }
.as-display-md { font-size: var(--as-display-md); font-weight: 700; line-height: var(--as-lh-snug); }
.as-display-sm { font-size: var(--as-display-sm); font-weight: 600; line-height: var(--as-lh-snug); }

.as-h1   { font-size: var(--as-h1);   font-weight: 700; line-height: 30px; letter-spacing: -0.005em; }
.as-h2   { font-size: var(--as-h2);   font-weight: 700; line-height: 22px; }
.as-h3   { font-size: var(--as-h3);   font-weight: 600; line-height: 20px; }

.as-body       { font-family: var(--as-font-body); font-size: var(--as-body);    font-weight: 400; line-height: 20px; color: var(--as-ink-soft); }
.as-body-sm    { font-family: var(--as-font-body); font-size: var(--as-body-sm); font-weight: 400; line-height: 18px; color: var(--as-ink-soft); }
.as-caption    { font-family: var(--as-font-body); font-size: var(--as-caption); font-weight: 700; line-height: 14px;
                 text-transform: uppercase; letter-spacing: var(--as-tracking-wide); color: var(--as-ink-soft); }
.as-mono       { font-family: var(--as-font-body); font-size: var(--as-mono);    font-weight: 600; line-height: 14px;
                 font-variant-numeric: var(--as-tabular); }
.as-script     { font-family: var(--as-font-script); font-weight: 400; color: var(--as-gold); }

/* Wordmark feel — letterspaced display caps */
.as-wordmark {
  font-family: var(--as-font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--as-tracking-wider);
  color: var(--as-ink);
}

/* Gold gradient text utility (matches logo) */
.as-text-gold {
  background: var(--as-gradient-gold);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}

/* Eyebrow label, common to marketing + product */
.as-eyebrow {
  font-family: var(--as-font-body);
  font-size: var(--as-caption);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--as-tracking-wide);
  color: var(--as-gold-deep);
}